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: stackoverflow.com/questions/931207/… instead. — Pricey
– Pricey, Commented Oct 17, 2013 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
– rockerist, Commented Oct 21, 2013 at 7: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
– Pricey, Commented Oct 21, 2013 at 9: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
– Juan Hernandez, Commented Apr 3, 2014 at 10:59
Regarding your second question use the "oninput" event instead of "onkeydown". — Juan Hernandez
– Juan Hernandez, Commented Apr 3, 2014 at 11:02

Mogsdad · Accepted Answer · 2015-10-28 13:26:24Z

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 i have edited my above code & now it should work with delete also. Here is the demo jsfiddle.net/vdv9q

wmbtrmb · Accepted Answer · 2013-10-17 11:33:06Z

0

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.

answered Oct 17, 2013 at 11:33

wmbtrmb

3072 silver badges19 bronze badges

1 Comment

rockerist Over a year ago

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.

Joran Den Houting · Accepted Answer · 2013-10-17 11:32:54Z

-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, 2013 at 11:32

answered Oct 17, 2013 at 11:23

Joran Den Houting

3,1634 gold badges24 silver badges51 bronze badges

1 Comment

rockerist Over a year ago

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.

Collectives™ on Stack Overflow

auto-resizing text input box html

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related