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

＆＃13;

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

＆＃13;

Answer 3

宽度不能像角色宽度那样精确地增加。

但是，你仍然可以做这样的事情

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

Demo 正如你所看到的，我假设对于每个角色，场大小必须增加10px。这很难分配适合所有角色的正确口粮。

Answer 4

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

请注意，div需要在屏幕外（左：-9999px），而不是隐藏（显示：无），否则它将无法工作，因为浏览器需要渲染文本才能计算宽度。此外，将div的文本设置为文本框内容加上尾随空格将有助于确保文本框始终大于所需的一个字符，从而解决显示的键与正在更新的宽度之间的任何延迟。

休息之后，我将发布James Padolsey的JQuery Autoresize脚本的修改版本，该脚本与textareas一起使用，首先将宽度调整为某个最大尺寸，然后在文本包装时调整高度。这不完全是你想要的，但它可能有所帮助。

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

4 个答案: