admin管理员组文章数量:1191748
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.
FIDDLE DEMO
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 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.
FIDDLE DEMO
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);
}
});
5 Answers
Reset to default 14I 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
Adding a simple inline code in onkeyUp should help
<input type="text" name="fname" onkeypress="this.style.minWidth = ((this.value.length + 1) * 7) + 'px';">A solution similar to @Tejas', but doesn't require the font to be mono-space:
The trick is to use scrollWidth, which gives us the total string length, even on single-line textboxes without a scrollbar:
https://stackoverflow.com/a/9312727/1869660
NOTE: I couldn't get this to work in IE, where scrollWidth always returned 2 for some reason..
Some code:
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 example
<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); }
});
You were using width field which is actually meant for type = image. You can get more info here. I have used size attribute which is used to set the size of input tag in pixels. When its 1 it can take 6 characters by default hence -6. Hope it helps.
On the x-editable documentation you can find the option type so i guess you have to add data-editable-type="textarea"
本文标签：
版权声明：本文标题：javascript - dynamically increase input type text textbox width according to the characters entering into it - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738446458a2087241.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论