使用jQuery自動(dòng)擴(kuò)展textarea如何使用jQuery自動(dòng)擴(kuò)展textarea？我有一個(gè)用于解釋會議議程的文本框，所以當(dāng)我的議程文本不斷增加該文本框區(qū)域時(shí)，我想擴(kuò)展該文本框。
3 回答
慕尼黑5688855
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊
您可以嘗試在textarea中按住enter鍵。比較效果與其他自動(dòng)擴(kuò)展textarea插件....
根據(jù)評論進(jìn)行編輯
$(function() {
$('#txtMeetingAgenda').autogrow();});注意：你應(yīng)該包含所需的js文件......
為了防止在textarea的滾動(dòng)條從閃爍和關(guān)閉過程中膨脹/收縮，可以設(shè)置overflow到hidden還有：
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
更新：
上面的鏈接已被破壞。但你仍然可以在這里獲取javascript文件。
慕標(biāo)琳琳
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊
如果你不想要一個(gè)插件，那就有一個(gè)非常簡單的解決方案
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};});看到它在一個(gè)jsFiddle工作我曾經(jīng)在這里回答另一個(gè)textarea問題。
要回答這樣做的問題，或者在文本刪除時(shí)將其縮?。?a >jsFiddle
如果你想要一個(gè)插件
守著星空守著你
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊
生長/收縮textarea。這個(gè)演示使用jQuery進(jìn)行事件綁定，但它不是必須的。
（沒有IE支持 - IE不響應(yīng)行屬性更改）
演示頁面
HTML
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
CSS
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;}javascript（更新）
$(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;
});添加回答
舉報(bào)
0/150
提交
取消