how to set input width as long as the text inside

Question

How can I set the with of '<input>' element equal to the content with? (The content is dynamic.)

example: http://jsfiddle.net/WG86g/

possible duplicate http://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields — mas-designs, Mar 02 '12 at 09:39

score 1 · Answer 1 · answered Mar 02 '12 at 09:41

1

See if this works for you

<input id="chk1" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

The problem is that multiples of 8 are handled.

answered Mar 02 '12 at 09:41

S.P.

3,054
1
19
17

score 0 · Answer 2 · answered Jan 21 '13 at 17:01

0

$("input").css("width",$(this).prop("scrollWidth"));

answered Jan 21 '13 at 17:01

Sinan AKYAZICI · Answer 3 · 2013-01-22T08:29:47.437

0

you should use this. simple and easy

$('#textbox').autoResize();

http://james.padolsey.com/javascript/jquery-plugin-autoresize/

EDIT:

James Padolsey left to develop this plugin. So I would recommend you to use Jack Moore's plugin. If you want to use old js file, you can access js file from here.

http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/view

https://github.com/jackmoore/autosize

http://www.jacklmoore.com/autosize

edited Jan 22 '13 at 08:29

answered Mar 02 '12 at 09:49

Sinan AKYAZICI

3,942
5
35
60

link doesn't exist anymore – Francisco Costa Jan 21 '13 at 20:21
Jack Moore's plugin serves a different purpose than what is requested – Arturo Torres Sánchez Oct 27 '15 at 18:17

how to set input width as long as the text inside

3 Answers3