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

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

我已经做了如下所示的解决方法，它部分工作，它会动态增加宽度，但不是那么精确，并且由于我在其中应用的逻辑不佳，一段时间后会隐藏第一个输入的字符。我刚刚给出了 17 个字符计数的野生截止值来开始增量。

仅当字符数到达文本框末尾时，它才应开始宽度增量。

更新：

我希望使字段中输入的所有字符可见，而默认情况下文本框隐藏最左侧的字符。

小提琴演示

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

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

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

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

<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);    }
    });

您正在使用宽度字段，该字段实际上是用于类型 = 图像。您可以在此处获取更多信息。我使用了 size 属性，用于以像素为单位设置输入标签的大小。当它为 1 时，默认情况下它可以接受 6 个字符，因此 -6。希望对您有所帮助。

类似于

@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 示例

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

相关内容

最新更新

热门标签：