我正在使用 bootstrap-wysihtml5所以从文本区域输入字段接收输入。为了改善用户体验，我想自动调整文本区域的大小以适应输入文本。
借助 this Gist 中的代码我可以在单击时调整文本区域的大小，但不能在加载时调整。
这是我当前的实现:
var container = $("#container");
var textarea = $("<textarea />");
textarea.attr("style", "width: 90%;");
container.append(textarea);
textarea.wysihtml5({
"font-styles": false,
"emphasis": false,
"lists": false,
"html": false,
"link": false,
"image": false,
"color": false
});
textarea.val("<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div<div><br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div");
textarea.observe("load", function () {
var $iframe = $(this.composer.iframe);
var $body = $(this.composer.element); // <body marginwidth="0" marginheight="0" contenteditable="true" class="wysihtml5-editor" spellcheck="true" style="color: rgb(85, 85, 85); cursor: auto; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px; min-height: 0px; overflow: hidden; background-color: rgb(255, 255, 255);"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></div><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..</div></body>
$body.css({
'min-height': 0,
'line-height': '20px',
'overflow': 'hidden',
})
var scrollHeightInit = $body[0].scrollHeight; // 3860
var bodyHeightInit = $body.height(); // 3860
var heightInit = Math.min(scrollHeightInit, bodyHeightInit); // 3860
$iframe.height(heightInit);
$body.bind('keypress keyup keydown paste change focus blur', function(e) {
var scrollHeight = $body[0].scrollHeight; // 150
var bodyHeight = $body.height(); // 60
var height = Math.min(scrollHeight, bodyHeight); // 60
$iframe.height(height);
});
});
如您所见，height 的计算结果为 60，这是正确的。但是 heightInit 的计算结果为 3860，这是不正确的。我该如何解决这个问题？
最佳答案
bootstrap-wysihtml5 有一个 events 属性；其中一个事件是 load 事件。
To resize the textarea on load, all you need to do is declare a
loadevent within thetextarea.wysihtml5configuration function;
见下面的代码:
代码
textarea.wysihtml5({
...other properties....,
"events": {
"load": function() {
console.log("Loaded!");
var $iframe = $(this.composer.iframe);
var $body = $(this.composer.element);
$body.css({
'min-height': 0,
'line-height': '20px',
'overflow': 'hidden',
});
var scrollHeightInit = $body[0].scrollHeight;
console.log("scrollHeightInit", scrollHeightInit);
var bodyHeightInit = $body.height();
console.log("bodyHeightInit", bodyHeightInit);
var heightInit = Math.min(scrollHeightInit, bodyHeightInit);
$iframe.height(heightInit);
}
}
});
这里是 Working Plunker
关于javascript - 如何正确调整 wysihtml5 textarea 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28938624/