javascript - 创建一个具有自动扩展宽度的文本框？

Question

我将如何创建一个具有自动扩展宽度以适应其内容的文本框？

我一直在寻找大量关于基于高度的扩展的信息，但关于宽度的信息却不多。

我还希望它适用于页面上的每个文本框，而不仅仅是特定的文本框。

Answer 1

不确定这是否是您的想法，但这不应该有效吗？

<script language="javascript">
function expand(f)
{
    f.size = f.size + 1;
}
</script>

<input type="text" size="20" onkeyup="expand(this)" />

Answer 2

如果你想要退格键处理使用这个：

<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20"> 

如果您想要退格键处理并忽略箭头键，请使用这个：

<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==4‌​0){this.size++;}" size="6">

Answer 3

我认为更好的解决方案是检查文本的长度并在文本太长时修改文本框，而不是检查不应该触发扩展的每种类型的键事件。一个例子：

<script type="text/javascript">
function expand(textbox){
    var minSize = 20;
    var contentSize = textbox.value.length;
    if(contentSize > minSize)
    {
        textboxSize = contentSize;
    }
    else
    {
        textboxSize = minSize;
    }
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />