dynamically increase input type text textbox width

2019-01-26 19:56发布

站内问答 / JavaScript
339 4 4

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);
    }
});

4条回答
祖国的老花朵
2楼-- · 2019-01-26 20:20 
<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.

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
3楼-- · 2019-01-26 20:31

Adding a simple inline code in onkeyUp should help

<input type="text" name="fname" onkeypress="this.style.minWidth = ((this.value.length + 1) * 7) + 'px';">

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
4楼-- · 2019-01-26 20:37

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

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
5楼-- · 2019-01-26 20:41

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)