Jquery 输入字段调整大小,文本在一定长度后爬行
我正在创建一个类似于命令提示符的输入字段。作为查找输入字段的视觉提示,我在输入框的两侧有括号。当用户键入时,只要他们键入新字符,输入字段就会调整大小 唯一的问题是,当输入太多时,输入字段的左侧会超出字段的边界 以下是输入字段的代码:Jquery 输入字段调整大小,文本在一定长度后爬行,jquery,css,input,Jquery,Css,Input,我正在创建一个类似于命令提示符的输入字段。作为查找输入字段的视觉提示,我在输入框的两侧有括号。当用户键入时,只要他们键入新字符,输入字段就会调整大小 唯一的问题是,当输入太多时,输入字段的左侧会超出字段的边界 以下是输入字段的代码: <div class="line" id="command-wrapper"> <span class="text-green">[</span><input id="command" autofocus conte
<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});
});
以下是我的JSFIDLE:
在该示例中,如果键入的字符超过17个,您将看到效果。在我的测试中,手机上的情况更糟,通常只有几个字符“爬行”。我看过你的代码。它不会超出输入字段的范围。您必须用textarea替换输入
<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>
这不是
textarea
的工作方式。虽然我曾考虑过使用textarea
,但这需要对我的代码进行充分的修改,特别是因为我必须考虑jQuery中的“height”和“width”值。不过,谢谢你!
textarea
{
overflow:hidden;
width:80%;
border:none;
}