2

I have tried different ways to make an input adapt to is text. The closer I get with jQuery is: $("div").attr("size", $("div").val().length );

I think this works with the attribute size, but this does not seem to measure very well the text. It seems that size works well to measure numbers but not text:

<input type="text" id="first" name="first" size="11" value="this has 11">
<br>
<input type="text" id="second" name="second" size="11" value="12345678901">
<br>
<input type="text" id="third" name="third" size="22" value="this has 22 characters">

So, when I use size with jQuery:

$("#jQ").attr("size", $("#jQ").val().length );

HTML:

<input type="text" id="jQ" name="jQ" value="text, text, text">

Here is the example to play: http://jsfiddle.net/auk7g40m/

Is there a better way to make an input adapt to its text?

Danield
  • 121,619
  • 37
  • 226
  • 255
Nrc
  • 9,577
  • 17
  • 67
  • 114
  • 2
    fiddle link is broken. – Nicolas Aug 18 '14 at 14:31
  • 1
    The size attribute uses an average character width for the given font size. If you want an exact width, you would need to use a hidden element, updated a the input is typed into and set to the same font properties, and take the width from that. – Rory McCrossan Aug 18 '14 at 14:32
  • So there is no issue? You're just looking for a better alternative. You should post on the code review stack exchange. – Nicolas Aug 18 '14 at 14:32
  • You want the input to change width according to its characters? – Ramon Vasconcelos Aug 18 '14 at 14:35
  • @ramon, I want the input to change according to is characters. I suppose I have the specify in some way the font and size. – Nrc Aug 18 '14 at 14:37
  • Your question is duplicated http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value – Ramon Vasconcelos Aug 18 '14 at 14:44

4 Answers4

2

Unless you're using a monotype font where all the characters have the same width, the easiest way to get the width of a string is to append it to an element, and get the width of the element, like this

$("#jQ").css('width', function() {
    var el = $('<span />', {
        text : this.value, 
        css  : {left: -9999, position: 'relative'}
    }).appendTo('body');
    var w = el.css('width');
    el.remove();
    return w;
});

Note that setting the height and width of an element doesn't really do anything unless the element has position and is not static.

FIDDLE

To make the width follow the keys as they are pressed, you'd just wrap that in an event handler

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • @Nrc - That's where you'll need an event handler, and I added two fiddles in the answer, try the second one. – adeneo Aug 18 '14 at 14:47
  • I tred the second fiddle with more text – Nrc Aug 18 '14 at 14:49
  • @Nrc - And you're saying it doesn't work, when you add text to the last input it doesn't increase in size ? – adeneo Aug 18 '14 at 15:04
  • Sorry, perhaps there is something I do not understand. I tried here: http://jsfiddle.net/auk7g40m/9/ – Nrc Aug 18 '14 at 15:17
  • @Nrc - seems to work just fine for me? What browser are you using ? – adeneo Aug 18 '14 at 15:20
  • I use Safari, it does not work. Now that you say I tried with Firefox and Chrome and it works better there. – Nrc Aug 18 '14 at 15:23
  • I'm guessing it's the `input` event that is causing that, but it should work in Safari just fine, so that's strange ? – adeneo Aug 18 '14 at 15:34
1

What you could do is set the font of the inputs to a monospace font so that all characters have the same width.

Bob Meininger
  • 123
  • 8
1

A different approach which might be viable depending on your situation would be to use divs instead of inputs and add the contenteditable attribute.

Then add some simple css to create the look of an input element

FIDDLE (Add some text to the 'inputs' to see them grow)

CSS

div {
    border: 1px solid gray;
    display: inline-block;
    margin: 10px 0; 
}
Danield
  • 121,619
  • 37
  • 226
  • 255
-3

You need onKeyPress function (iv just added the js into the html itself as an example)

<input id="first" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
jagmitg
  • 4,236
  • 7
  • 25
  • 59