Javascript 如何正确自动调整所见即所得HTML5文本区域的大小
我正在使用so从textarea输入字段接收输入。为了改善用户体验,我想自动调整文本区域的大小以适应输入文本 在中代码的帮助下,我可以在单击时调整文本区域的大小,但不能在加载时调整 以下是我当前的实现:Javascript 如何正确自动调整所见即所得HTML5文本区域的大小,javascript,jquery,autoresize,wysihtml5,bootstrap-wysihtml5,Javascript,Jquery,Autoresize,Wysihtml5,Bootstrap Wysihtml5,我正在使用so从textarea输入字段接收输入。为了改善用户体验,我想自动调整文本区域的大小以适应输入文本 在中代码的帮助下,我可以在单击时调整文本区域的大小,但不能在加载时调整 以下是我当前的实现: var container = $("#container"); var textarea = $("<textarea />"); textarea.attr("style", "width: 90%;"); container.append(textarea); textar
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);
});
});
var container=$(“#container”);
var textarea=$(“”);
attr(“样式”,“宽度:90%;”);
container.append(textarea);
textarea.wysihtml5({
“字体样式”:false,
“强调”:错误,
“列表”:错误,
“html”:false,
“链接”:错误,
“图像”:假,
“颜色”:假
});
textarea.val(“Lorem ipsum door sit amet,Concertetur adipising elit,sed do eiusmod temporal incidedut ut laboure et dolore magna aliqua.”bootstrap-wysihtml5
具有事件属性;其中一个事件是加载事件
要在加载时调整textarea的大小,只需在textarea.wysihtml5
配置函数中声明load
事件即可
见下面的代码:
代码
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);
}
}
});
以下是引导-wysihtml5
具有事件
属性;其中一个事件是加载
事件
要在加载时调整textarea的大小,只需在textarea.wysihtml5
配置函数中声明load
事件即可
见下面的代码:
代码
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);
}
}
});
这是Manube的答案对我不起作用。我不知道为什么。我从$body
和$iframe
获得了控制台日志。但未能设置$body.css
和$iframe.height()
。我采用了文档.getElementsByClassName('WYSITHTML5-sandbox')[0]。setAttribute()
取而代之。然后它成功了。不过,更改事件的UX以自动调整iframe的大小并不好。
马努比的回答对我帮助很大,非常简单。谢谢!
以下是我使用的代码:
$('#edit').wysihtml5({
toolbar:{ "fa": true, "image": false, "html": false },
locale: 'zh-TW',
name: 't-iframe',
events: {
load: function(){
var $body = $(this.composer.element);
var $iframe = $(this.composer.iframe);
iframeh = Math.max($body[0].scrollHeight, $body.height()) + 100;
document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + iframeh +'px !important');
},change: function(){
var $abody = $(this.composer.element);
var $aiframe = $(this.composer.iframe);
aiframeh = Math.max($abody[0].scrollHeight, $abody.height()) + 100;
document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + aiframeh +'px !important');
}
}
});
Manube的回答对我不起作用。我不知道为什么。我从$body
和$iframe
获得了控制台日志。但未能设置$body.css
和$iframe.height()
。我采用了document.getElementsByClassName('WYSITML5-sandbox')[0]。setAttribute()
取而代之。然后它成功了。不过,更改事件的UX以自动调整iframe的大小并不好。
马努比的回答对我帮助很大,非常简单。谢谢!
以下是我使用的代码:
$('#edit').wysihtml5({
toolbar:{ "fa": true, "image": false, "html": false },
locale: 'zh-TW',
name: 't-iframe',
events: {
load: function(){
var $body = $(this.composer.element);
var $iframe = $(this.composer.iframe);
iframeh = Math.max($body[0].scrollHeight, $body.height()) + 100;
document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + iframeh +'px !important');
},change: function(){
var $abody = $(this.composer.element);
var $aiframe = $(this.composer.iframe);
aiframeh = Math.max($abody[0].scrollHeight, $abody.height()) + 100;
document.getElementsByClassName('wysihtml5-sandbox')[0].setAttribute('style','height: ' + aiframeh +'px !important');
}
}
});
你能发布你的代码的一个最简单的工作示例吗?Hi@gabykag.Petrioli。上面的代码确实有效。它只是给了我一个错误的heightInit
值。所以如果你想测试它,你应该能够这样做,然后通过执行console.log(heightInit);
来确认我的发现。我的意思是如果有一个实时页面(,)所以我们不必创建一个包含所有插件的完整页面等等。我希望我可以。我在过去的几个小时里尝试创建一个JFIDLE,但我没有技能设置它,而不会在我自己的应用程序上出现各种各样的错误。您好,我想您的问题是根据文档高度来拟合wysihtml5
>。不是吗?我在项目中使用了所见即所得HTML5
。请注意这些函数。这些函数可能会解决您的问题。$(文档).height()
和$(窗口).height()
事实上,我无法完全理解您的问题。您可以发布一个代码的最简单的工作示例吗?Hi@GabyakaG.Petrioli。上面的代码确实有效。它只是给了我一个错误的heightInit
值。因此,如果您想测试它,您应该能够这样做,然后通过执行console.log(heightInit)来确认我的发现;
。我的意思是如果有一个实时页面(,)所以我们不必创建一个包含所有插件的完整页面等等。我希望我可以。我在过去的几个小时里尝试创建一个JFIDLE,但我没有技能设置它,而不会在我自己的应用程序上出现各种各样的错误。您好,我想您的问题是根据文档高度来拟合wysihtml5
>。不是吗?我在我的项目中使用了所见即所得HTML5
。请注意这些函数。这些函数可能会解决您的问题。$(文档)。height()
和$(窗口)。height()
实际上我无法完全理解您的问题。