当前位置：文江博客话题详情

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

发布于 2024-08-18 05:15:43 字数 114 浏览 6 评论 0原文

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

我不断找到大量关于基于高度的扩展的信息，但关于宽度的信息却很少。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巷雨优美回忆 2024-08-25 05:15:43

不确定这是否是您的想法，但这不应该起作用吗？

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

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

Not sure if this is what you had in mind, but shouldn't this work?

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

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

回复收藏 0 原文

夜唯美灬不弃 2024-08-25 05:15:43

如果您想要退格键处理，请使用此：

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

If you want backspace key handling use this:

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

If you want backspace key handling and to ignore arrow keys use this one:

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

回复收藏 0 原文

み青杉依旧 2024-08-25 05:15:43

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

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

I think a better solution would be to check the length of the text and modify the textbox if the text was too long rather than checking for every type of key event that shouldn't trigger an expansion. An example:

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

回复收藏 0 原文

~没有更多了~