auto-resizing text input box html

Question

I created an input (type text) box and made it auto-resize quite simply. However, there are a few glitches that I can't seem to fix:

when I start typing the box shrinks a tiny bit
when I press backspace (or directional arrows), the box expands first, and then shrinks when I continue typing.

Here is my code:

function Expander() {
     
    this.start = function () {
       
        $("#inputbox").keydown(function(e) {
                  
            this.style.width = 0;
            var newWidth = this.scrollWidth + 10;
       
            if( this.scrollWidth >= this.clientWidth )
                newWidth += 10;
        
            this.style.width = newWidth + 'px';
       
        });
      
    }
     
}
    
    
$(function() {
    window.app = new Expander();
    window.app.start();
});

input {
     margin-left:3em;
     min-width:100px;
     max-width:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<meta charset="UTF-8">
<body>

    <div id="wrap">
     <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." width="100px"/>
    </div>
    <div id="counter"></div>
</body>

just an observation, think about when pasting text or pressing a key down and holding it. Maybe you should look at the plugin on this answer: http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields instead. — Pricey, Oct 17 '13 at 11:16
thanks, i wasn't finished with my code, just wondered why it had issues. i will never learn the language if i just take the code from others :) — rockerist, Oct 21 '13 at 07:28
you don't need to just take the code, you can analyse what their code is doing so you can write your own plugin, I find that very helpful when learning. — Pricey, Oct 21 '13 at 09:10
Regarding your first question I think it shrinks because the default width of an input is 117px (at least in chrome). If you set the width in the CSS to be the same as min-width it should be fine. — Juan Hernandez, Apr 03 '14 at 10:59
Regarding your second question use the "oninput" event instead of "onkeydown". — Juan Hernandez, Apr 03 '14 at 11:02

score 3 · Answer 1 · edited Oct 28 '15 at 13:26

You can try this.

We put the content in a hidden span & then adjust width according to span scrollWidth.

function Expander() {

    this.start = function () {

        $('#inputbox').on('keydown',function(e) {

            $("#hidden_span").html("");
            $("#hidden_span").append("<p>"+$(this).val()+"</p>");

            var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;

            if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                $(this).css("width",hidden_span_scroll_width);
            }

        });

    }

}


$(function() {
    window.app = new Expander();
    window.app.start();
});

input {
    margin-left:3em;
    min-width:100px;
    max-width:600px;
}

#hidden_span{
    position:absolute;
    top:0px;
    left:0px;
    visibility:hidden;
    width:10px;
    white-space:nowrap;
    overflow:hidden;
}

<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>

<body>
<div id="wrap">
    <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<title>Test page</title>
</head>

<body>
<style>
input {
    margin-left:3em;
    min-width:100px;
    max-width:600px;
}
        #hidden_span{
            position:absolute;
            top:0px;
            left:0px;
            visibility:hidden;
            width:10px;
            white-space:nowrap;
            overflow:hidden;

        }
</style>
<script>

function Expander() {

    this.start = function () {

        $('#inputbox').on('keydown',function(e) {


            $("#hidden_span").html("");
            $("#hidden_span").append("<p>"+$(this).val()+"</p>");


            var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;

     if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
                $(this).css("width",hidden_span_scroll_width);
                     }


        });

    }

}


$(function() {
    window.app = new Expander();
    window.app.start();
});

</script>
<div id="wrap">
    <input type="text" id="inputbox" name="input" placeholder="yes" />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>
</html>

thanks, this solves my issues but it doesn't resize back on delete and backspace. that's an easier fix though. — rockerist, Oct 21 '13 at 07:31
@rockerist i have edited my above code & now it should work with delete also. Here is the demo http://jsfiddle.net/vdv9q/ — Peeyush, Oct 21 '13 at 14:01

score 0 · Answer 2 · answered Oct 17 '13 at 11:33

At first you can use jQuery methods to avoid crossbrowser problem. And scrollWidth returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. So enlarge newWidth only when content width strongly larger than element width.

$("#inputbox").keydown(function(e) {

  var a = $(this).width(), newWidth;


  if(this.scrollWidth - a > 0){
    newWidth = a + 10;
  }else if(e.keyCode==8){
    newWidth = a - 10;
  }
  $(this).css("width", newWidth);

});

If you don't want to make input smaller when pressed backspace - delete else if part of code.

ok, this works just fine but i kind of don't want to hardcode keys into it because this code does not work if i press delete. i wanted the box to resize solely based on its contents. — rockerist, Oct 21 '13 at 07:44

Joran Den Houting · Answer 3 · 2013-10-17T11:32:54.037

-1

<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>

Remove the width="100px", like this:

<input type="text" id="inputbox" name="input" placeholder="yes"/>

And it won't resize down anymore when starting to type.

Live example:

http://jsfiddle.net/2EMfd/

Though, the exanding function doesn't seem to work in my browser?

*Edit, did a simple expand function on the inputbox is this what you where trying? http://jsfiddle.net/2EMfd/1/

edited Oct 17 '13 at 11:32

answered Oct 17 '13 at 11:23

Joran Den Houting

3,149
3
21
51

thanks, but no. the second link resizes on every key press, even on cmd and directional arrows. i need it to expand as the contents inside it reach near the width of the input box. – rockerist Oct 21 '13 at 07:35

auto-resizing text input box html

3 Answers3

Linked