我正在创建一个行为类似于命令提示符的输入字段。作为查找输入字段的视觉提示,我在输入框的两侧有括号。当用户键入时,输入字段会在键入新字符时调整大小。
唯一的问题是当输入太多时,输入字段的左侧会爬出字段的边界。
这是输入字段的代码:
<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个字符,您将看到效果。在我的测试中,它在移动设备上更糟糕,通常是&#34;爬行&#34;只需几个字符。
答案 0 :(得分:0)
我看过你的代码了。它不会超出输入字段的范围。你必须用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;
}