文本框应该在输入时自动增大。

Question

文本框应该在输入时自动增大。

4

我正在寻找一个文本框效果。最初，文本框的大小将很小，当输入时，文本框应该变得更大。是否有可用于此效果的jquery插件？如果没有，如何实现？

- user1165815

2

你尝试过什么？从Google开始如何？第三个结果看起来很有用。https://www.google.com/webhp?sourceid=chrome-instant&ie=UTF-8&ion=1#hl=en&sclient=psy-ab&q=textarea%20grow%20with%20text&oq=&aq=&aqi=&aql=&gs_nf=&gs_l=&pbx=1&fp=a366a72422fd9740&ion=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb - Dutchie432

3

你需要先接受一些答案。 - qwertymk

https://dev59.com/_msz5IYBdhLWcg3wpZry - Blazemonger

我已准备好接受，但我的声誉必须达到15。 - user1165815

你只需要1个声望来点击勾选标记，即接受答案。我已经给了你5个声望，这样你也可以点赞（向上箭头）一些答案 :) - Heitor Chang

谢谢，我已经为这些答案点赞了。我会标记它们为已回答。 - user1165815

3个回答

2

var $text = $('myselector')
$text.keyup(function() {
    $(this).attr({size : $(this).val().length});
});

这会直接从文本框中输入的字符串长度中获取尺寸。

- pdizz

不幸的是，这个答案不允许用户输入，因为大小将自动等于文本框中已有的内容，这意味着用户将无法输入任何新文本。此外，如果您只修改一个变量，就不需要将对象传递到 .attr() 函数中。只需使用 $(this).attr("size", $(this).val().length); 即可。 - Elliot Bonneville

假设文本框有默认/起始大小，则可以正常工作。 - pdizz

哎呀，你说得对，我忘记了长度实际上比字符串中的字符数量多一个，因为字符是从0开始索引的。这个没问题。:D - Elliot Bonneville

-1

看一下这个 jQuery 插件：

http://www.unwrongest.com/projects/elastic/

- MattSull

-1 给那个网站的开发者。链接页面上的演示不起作用！（我使用的是 Chrome 浏览器。） - Christoffer Lette

我正在使用Chrome，它对我有效。你试过了吗？http://jsfiddle.net/janjarfalk/r3Ekw/ - MattSull

这个 jsfiddle 可以正常工作，但是链接的页面仍然有 bug。看起来 "elastic" 正在对文本区域进行处理，但页面的其他部分没有跟上... - Christoffer Lette

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elliot Bonneville · Accepted Answer

$("#mytextbox").keyup(function() {
    $(this).attr("maxLength", $(this).attr("maxLength") + 1);
    $(this).attr("size", $(this).attr("size") + 1);
});

请注意，如果用户在文本框聚焦时按下功能键，大小将会增加。您应该监控文本框的值的变化，而不是仅仅因为用户按下了功能键就改变大小。

$("#mytextbox").keyup(function() {
    $(this).attr("size", $(this).val().length + 1);
});

请注意，第二种方法还支持将内容复制/粘贴到输入字段中，而第一种方法不支持。尽管如此，您仍需确保用户有足够的空间来复制内容（现在，大小设置为当前值的+1，这意味着用户只能在增加大小之前逐个字符输入）。