Question

我只是想知道如何在输入时动态调整输入大小？

我想尽可能使用jQuery＆amp;我宁愿它是一个小脚本，而不是一个笨重的插件。

请告诉我，马特穆勒

Answer 1

这是一个快速（未经测试）的解决方案

$('input[type="text"]').keyup(function(){
  $(this).attr({width: 'auto', size: $(this).val().length});
});

Answer 2

我在GitHub上有一个jQuery插件：https://github.com/MartinF/jQuery.Autosize.Input

大约1.6 kb。

您可以在此处查看实时示例：http://jsfiddle.net/mJMpw/6/

示例：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

如果你想要一个很好的效果，你只需使用css设置最小/最大宽度并在宽度上使用过渡。

您可以指定结尾的空格/距离作为输入元素上data-autosize-input属性的json表示法中的值。

当然你也可以使用jQuery初始化它

$("selector").autosizeInput();

Answer 3

我找到了这个轻量级的。这是针对textareas

jQuery plugin: ‘autoResize’

完整版：~4k

缩小：~1k

动态调整输入大小

3 个答案: