动态调整输入大小

Question

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

我想尽可能使用jQuery,我宁愿它是一个小脚本,而不是一个庞大的插件.

请让我知道,马特穆勒

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();