如何使用jQuery实现自动扩展文本域?
我有一个文本框,用于解释会议议程,因此当我的议程文本不断增加时,我希望扩展该文本框的区域。
如何使用jQuery实现自动扩展文本域?
我有一个文本框,用于解释会议议程,因此当我的议程文本不断增加时,我希望扩展该文本框的区域。
如果您不想使用插件,有一个非常简单的解决方案。
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
你可以在这个jsFiddle中看到它的工作原理,我在那里回答了另一个关于文本框的问题。
如果你想要将其反转或者缩小,可以参考这个jsFiddle。
如果你确实需要一个插件
if (this.clientHeight < this.scrollHeight) { this.style.height = this.scrollHeight + 'px'; }
(注:该代码用于自动扩展文本框的高度以适应其内容,如果文本内容超过了文本框的高度,则将文本框的高度设置为文本内容的高度。) - Georgii Ivankin我尝试过很多,而这个插件非常好用。 链接失效。新版本在这里。请看下面旧版的内容。
你可以在文本区域中按住Enter键来尝试。将此效果与其他自动扩展文本框插件进行比较...
编辑,基于评论
$(function() {
$('#txtMeetingAgenda').autogrow();
});
注意:您应该包含所需的js文件...
为了防止文本区域中的滚动条在扩展/收缩期间闪烁,您还可以将overflow
设置为hidden
:
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
更新:
上面的链接已经失效了。但是你仍然可以在这里获取JavaScript文件。
使文本区域变大/变小。此演示利用jQuery进行事件绑定,但这并不是必须的。
(不支持IE - IE不响应rows属性更改)
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
textarea{
display:block;
box-sizing: padding-box;
overflow:hidden;
padding:10px;
width:250px;
font-size:14px;
margin:50px auto;
border-radius:8px;
border:6px solid #556677;
}
$(document)
.one('focus.textarea', '.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
$('#content').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<textarea>How about it</textarea><br />
<textarea rows="5">111111
222222
333333
444444
555555
666666</textarea>
</div>
多亏了SpYk3HH,我从他的解决方案开始,并将其转化为这个解决方案,它增加了收缩功能,而且更简单更快速,我想。
$("textarea").keyup(function(e) {
$(this).height(30);
$(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});
已在当前Chrome、Firefox和Android 2.3.3浏览器中进行测试。
某些浏览器中可能会看到滚动条闪烁。添加此CSS以解决该问题。
textarea{ overflow:hidden; }
为了定义一个自动可扩展的文本框,您需要执行两个步骤:
这里是一个手写函数来完成此任务。
几乎所有浏览器都可以正常工作(低于IE7)。 这是方法:
//Here is an event to get TextArea expand when you press Enter Key in it.
// intiate a keypress event
$('textarea').keypress(function (e) {
if(e.which == 13) {
var control = e.target;
var controlHeight = $(control).height();
//add some height to existing height of control, I chose 17 as my line-height was 17 for the control
$(control).height(controlHeight+17);
}
});
$('textarea').blur(function (e) {
var textLines = $(this).val().trim().split(/\r*\n/).length;
$(this).val($(this).val().trim()).height(textLines*17);
});
这里是一篇关于此事的帖子。
我之前使用过Textarea Expander jQuery插件,效果不错。
function autosize(textarea) {
$(textarea).height(1); // temporarily shrink textarea so that scrollHeight returns content height when content does not fill textarea
$(textarea).height($(textarea).prop("scrollHeight"));
}
$(document).ready(function () {
$(document).on("input", "textarea", function() {
autosize(this);
});
$("textarea").each(function () {
autosize(this);
});
});
(因为它使用了input
事件,所以它不能在Internet Explorer 9或更早版本中工作)