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)" />

创建一个自动扩展宽度的文本框？

3 个答案: