如何根据输入的文本增加文本字段的宽度？

Question

如果用户在其中输入一些文本，我想自动增加输入文本字段的宽度。但如何去做。请帮助我。它可以使用jquery或javascript

谢谢。

Answer 1

尝试这样的：

<script> 
function adjustWidth(obj) { 

    obj.style.width = (obj.value.length) * 7.3 + "px"; 
} 
</script> 
<input type="text" onkeypress="adjustWidth(this)"> 

然而，这取决于文字大小，字体等

Answer 2

你的意思是这样

DEMO

<input style="width:100px" onkeyup="var len = this.value.length; 
if (len>10) { 
    this.style.width=(parseInt(this.style.width)+10)+'px'; 
}" /> 

Answer 3

宽度不能作为准确随着字符的宽度彼此不同。

但尽管如此，你可以做这样的事情

$("input:text").keyup(function() { 
    $(this).css('width', $(this).val().length*10); 
}); 

Demo 正如你可以看到我假设每个字符字段大小必须增加10px的。这很难分配适合所有角色的正确配给。

Answer 4

其实，你可以精确地做到这一点。您可以通过在屏幕外打开绝对位置的div，并使用与您的文本框相同的字体并在文本框中填充文本框中的文本来完成此操作。然后，将该div的宽度（将符合文本）并将文本框设置为该宽度。

请注意，div需要离屏（左：-9999px），而不是隐藏（display：none），否则它将不起作用，因为浏览器需要渲染文本以​​计算宽度。另外，将div的文本设置为文本内容以及尾部空格将有助于确保文本框总是比所需的字符大一个字符，从而解决了显示的键和正在更新的宽度之间的任何延迟。

休息过后，我会发布一个修改后的James Padolsey的JQuery Autoresize脚本文件，它可以与textareas一起使用，首先将宽度调整为某个最大大小，然后将文本的高度调整为文本换行。这不完全是你想要的，但它可能会有所帮助。