如何根据键入的文本增加文本字段的宽度？ [复制]答案

【问题标题】：How to increase width of textfield according to typed text? [duplicate]如何根据键入的文本增加文本字段的宽度？ [复制]
【发布时间】：2012-03-12 13:28:57
【问题描述】：

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

谢谢。

【问题讨论】：

这是stackoverflow.com/questions/1288297/…的重复

标签： javascript jquery

【解决方案1】：

试试这个：

<script>
function adjustWidth(obj) {

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

但这取决于文本大小、字体等

【讨论】：

【解决方案2】：

宽度不能像字符宽度一样精确地增加。

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

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

Demo 如您所见，我假设对于每个字符，字段大小必须增加 10 像素。很难分配适合所有角色的正确口粮。

【讨论】：

【解决方案3】：

你的意思是这样的

DEMO

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

【讨论】：

【解决方案4】：

实际上，您可以精确地做到这一点。您可以通过在屏幕外使用与文本框相同的字体打开一个绝对定位的 div 并在 keyup 上使用文本框的文本填充它来做到这一点。然后，您获取该 div 的宽度（将符合文本）并将您的文本框设置为该宽度。

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

休息后，我将发布 James Padolsey 的 JQuery Autoresize 脚本的修改版本，该脚本与 textareas 一起使用，首先将宽度调整为某个最大尺寸，然后在文本换行后调整高度。这不是您正在寻找的东西，但它可能会有所帮助。

【讨论】：