根据输入的字符动态增加输入类型的文本文本框宽度 [英] dynamically increase input type text textbox width according to the characters entering into it
问题描述
我有一个文本框，用户可以输入任意数量的字符，但是我希望它的宽度相对于输入的字符数动态增加进入它。
我已经做了一个解决方法如下所示，它部分工作，它会动态增加宽度，但不是那么精确，并会隐藏第一个输入一段时间后，因为我的逻辑不好应用于其中。我刚刚给出了17个字符的截断计数以开始增量。
仅当字符数达到文本框末尾时才会开始宽度增量。
更新：
我正在查看所有在字段中输入的字符，而默认情况下，文本box隐藏最左边的字符。
$ b HTML
< input type =textid =txtbox/>
SCRIPT
< pre $ $（'＃txtbox'）。keypress（function（）{
var txtWidth = $（this）.width（）;
var cs = $（ （cs> 17）{
$（this）.width（txtWidth + 5）;
}
} .val（）。length;
if ）;
我试过这段代码，它工作正常。 / p>
< html>
< head>
< script type =text / javascript>
函数展开（obj）{
if（！obj.savesize）obj.savesize = obj.size;
obj.size = Math.max（obj.savesize，obj.value.length）;
}
< / script>
< / head>
< body>
< form>
< input type =textsize =5style =font-family：Courier;的onkeyup = 展开（本）; >
< / form>
< / body>
< / html>
一定要在文本框中使用单色空间字体，否则大小attr。和字符数量不匹配
I have a textbox where the user can enter any number of characters, But I want its width to be increased dynamically with respect to the number of characters entered into it.
I have done a workaround shown below and it works partially, it will increase the width dynamically but not so precisely and will hide the first entered characters after a while because of my poor logic applied in it. I've just given a wild cutoff of 17 characters count to start the increment.
It should start the width increment only if the character count reaches the end of textbox.
UPDATE:
I am looking to make visible all the characters entered in the field, whereas in default the text box hides the leftmost characters.
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);
}
});
I have tried this code and it works fine.
<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>
Be sure to use mono space fonts in text box, otherwise the size attr. and number of characters won't match
这篇关于根据输入的字符动态增加输入类型的文本文本框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
