How to increase the size of my textbox with input?

Question

I have an html textbox that looks like this:

 <div class="control-group">
     <label class="required">
         Enter stuff here
     </label>
     <input type="text" placeholder="Required Field" class="form-control" id="secid">
</div>

I do further processing on the 'secid' in the javascript file associated with the html file. I need to increase the size of the textbox on-the-fly i.e. The more text I write, the input textbox gets bigger. There are questions related to this already such as this and this but none very clear. Could you help me it?

try this http://jsfiddle.net/eVd9b/5/ and http://jsfiddle.net/5QcQK/2/ — Aru, Oct 08 '14 at 08:45
jQuery autogrow plugin FTW! http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields — Frank, Oct 08 '14 at 09:16

score 0 · Answer 1 · answered Oct 08 '14 at 08:49

Try

 <input  size="5" style="font-family:Courier"; onkeyup="Expand(this);">

 function Expand(obj){
  if (!obj.savesize) obj.savesize=obj.size;
  obj.size=Math.max(obj.savesize,obj.value.length);
 }

this will increase and decrease textbox size on change.

DEMO

score 0 · Answer 2 · answered Oct 08 '14 at 08:51

0

Try This

<input id="Test" size="2" type="text" onkeyup="Expand(this)"/>

And JavaScript as

function Expand(obj) {
  obj.size = parseInt(obj.value.length);
}

DEMO

answered Oct 08 '14 at 08:51

Tushar Gupta

15,504
1
29
47

How to increase the size of my textbox with input?

2 Answers2