Question

我有一个textbox，用户可以在其中输入任意数量的字符，但我希望宽度相对于输入的字符数动态增加。

我已经完成了下面显示的解决方法并且部分工作，它会动态地增加宽度但不会那么精确，并且会在一段时间后隐藏第一个输入的字符，因为我的逻辑应用不佳。我刚刚给出了一个包含17个字符的狂野截止值来开始增量。

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

更新

我希望显示字段中输入的所有字符，而默认情况下，文本框会隐藏最左边的字符。

HTML

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

SCRIPT

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

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

Answer 1

我试过这段代码，但效果很好。

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

请务必在文本框中使用单声道空格字体，否则请使用大小attr。和字符数不匹配

Answer 2

类似于@Tejas的解决方案，但不要求字体为单空格：

诀窍是使用scrollWidth，它给出了总字符串长度，即使在没有滚动条的单行文本框中也是如此： https://stackoverflow.com/a/9312727/1869660

注意：我无法在IE中使用此功能，scrollWidth因某种原因总是返回2 ..

一些代码：

function expand(textbox) {
    if (!textbox.startW) { textbox.startW = textbox.offsetWidth; }

    var style = textbox.style;

    //Force complete recalculation of width
    //in case characters are deleted and not added:
    style.width = 0;

    var desiredW = textbox.scrollWidth;
    //Optional padding to reduce "jerkyness" when typing:
    desiredW += textbox.offsetHeight;

    style.width = Math.max(desiredW, textbox.startW) + 'px';
}

...

<input type="text" onkeyup="expand(this);" >

JSFiddle example

Answer 3

在 onkeyUp 中添加简单的内联代码应该有帮助

＆＃13;

<input type="text" name="fname" onkeypress="this.style.minWidth = ((this.value.length + 1) * 7) + 'px';">

＆＃13;

Answer 4

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

$('#txtbox').keypress(function() {
        var txtWidth = $(this).attr('size');
        var cs = $(this).val().length-6;
        txtWidth = parseInt(txtWidth);
        if(cs>txtWidth){
           $(this).attr('size',txtWidth+5);    }
    });

您使用的是宽度字段，实际上是指type = image。您可以获得更多信息here。我使用了size属性，用于设置输入标签的大小（以像素为单位）。当它为1时，默认情况下可以占用6个字符，因此为-6。希望它有所帮助。

Answer 5

在x可编辑文档中，您可以找到选项类型，所以我想您必须添加data-editable-type =“ textarea”

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

5 个答案: