javascript - 根据输入的字符动态增加输入类型文本文本框的宽度

标签 javascript jquery html textbox

我有一个文本框,用户可以在其中输入任意数量的字符,但我希望它的宽度根据输入的字符数动态增加 .

我已经完成了如下所示的解决方法并且它部分起作用,它会动态增加宽度但不是那么精确并且会在一段时间后隐藏第一个输入的字符,因为我在其中应用了糟糕的逻辑。我刚刚给出了 17 个字符的疯狂截止值来开始增量。

只有当字符数到达文本框的末尾时才开始增加宽度。

更新:

我想让字段中输入的所有字符都可见,而默认情况下,文本框会隐藏最左边的字符。

FIDDLE DEMO

HTML

<input type="text" id="txtbox" />

脚本

$('#txtbox').keypress(function() {
    var txtWidth = $(this).width();
    var cs = $(this).val().length;

    if(cs>17){
       $(this).width(txtWidth+5);
    }
});

最佳答案

我试过这段代码,它工作正常。

<html>
<head>
  <script type="text/javascript">
     function Expand(obj){
      if (!obj.savesize) obj.savesize=obj.size;
      obj.size=Math.max(obj.savesize,obj.value.length);
     }
  </script>
  </head>
  <body>
     <form>
       <input  type="text" size="5" style="font-family:Courier;" onkeyup="Expand(this);">
     </form>
  </body>
</html>

一定要在文本框中使用单空格字体,否则大小属性。字符数不匹配

关于javascript - 根据输入的字符动态增加输入类型文本文本框的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26814951/

相关文章:

html - 将 <div> 附加到所有具有 x 类的 <div>,除了

javascript - 如何在输入字段中显示结果?

当前上下文中不存在 javascript 参数

javascript - 如何避免使用异步服务重复填充数组

javascript - 使用 jQuery 在单击按钮时将内容添加到顶部 div 部分

javascript - 图像加载:JavaScript onLoad 和 Image::complete (FireFox 3)

javascript - jQuery appendTo 在 Firefox 上断开链接

javascript - 如何提高大字符串的 javascript 工具提示的性能?

jquery - Facebook Like 按钮在 div 中显示时移动整个页面居中

javascript - 使用指令注入(inject) DOM 元素 AngularJS