jquery - 输入字段调整大小，文本在一定长度后蠕变

Question

我正在创建一个行为类似于命令提示符的输入字段。作为查找输入字段的视觉提示，我在输入框的两侧有括号。当用户键入时，输入字段会在他们键入新字符时调整大小。

唯一的问题是，当输入过多时，输入字段的左侧会超出字段范围。

这是输入框的代码:

<div class="line" id="command-wrapper">
    <span class="text-green">[</span><input id="command" autofocus contenteditable="true" size=1/><span class="text-green">]</span>
    <button id="submit"></button>
</div>

这是重新计算输入字段大小的代码:

$('#command').keypress(function(e){
  if(e.which == 13){
    $('#submit').click();
  }
  $('#command').attr({'size': $('#command').val().length + 1});
});

这是我的 JSfiddle: https://jsfiddle.net/mediocreb/8anw08k1/6/

在该示例中，如果您键入超过 17 个字符，您将看到效果。在我的测试中，移动设备上的情况更糟，通常只有几个字符会“爬行”。

Answer 1

我看过你的代码。它不会超出输入字段的范围。你必须用 textarea 替换 INPUT

<div class="line" id="command-wrapper">
<span class="text-green">[</span><textarea id="command" autofocus size=1> 
</textarea><span class="text-green">]</span>
<button id="submit"></button>
</div>

无需在 Jquery 中进行更改

像这样添加CSS

textarea
{
 overflow:hidden;
 width:80%;
 border:none;
}