Dynamically adjust HTML text input width

Question

I cannot find a clear answer to this, and sorry if there is one that I missed.

I want my text input widths to automatically adjust to the size of the content inside them. First with placeholder text than with actual text that someone enters.

As an example, I created below. Currently, the boxes are much larger than my placeholder text, causing a huge amount of spaces, and this is obviously the same when I type in something.

I tried the auto width, some jQuery, and the twine and bubble rubber that I found on the Internet. But so far nothing has happened. Any thoughts? Thanks!

HTML:

<span><p>Hello, my name is </p></span> <span><input type="text" id="input" class="form" placeholder="name"></span> <span><p>. I am </p></span> <span><input type="text" id="input" class="form" placeholder="age"></span> <span><p> years old.</p></span> 

CSS

 .form { border: 0; text-align: center; outline: none; } span { display: inline-block; } p { font-family: arial; } 

Fiddle

Answer 1

Use onkeypress even

see this example: http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<i>

 <input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span> 

And for placeholder when loading use jquery and apply placeholder size for input

<i>

 $('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px'); 

Even if you can use id instead of input, this is just an example, so I use $ (input)

And in css, specify the minimum width

<i>

 .form { border: 1px solid black; text-align: center; outline: none; min-width:4px; } 

---

EDIT

---

If you remove all text from the input field, it will get a placeholder value using focusout

Example : http://jsfiddle.net/kevalbhatt18/yug04jau/8/

<i>

 $("input").focusout(function(){ if(this.value.length>0){ this.style.width = ((this.value.length + 1) * 8) + 'px'; }else{ this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px'; } }); 

Answer 2

One possible way:

 [contenteditable=true]:empty:before { content: attr(placeholder); color:gray; } /* found this online --- it prevents the user from being able to make a (visible) newline */ [contenteditable=true] br{ display:none; } 

 <p>Hello, my name is <span id="name" contenteditable="true" placeholder="name"></span>. I am <span id="age" contenteditable="true" placeholder="age"></span> years old.</p> 

Source for CSS: http://codepen.io/flesler/pen/AEIFc .

You will need to cheat a bit to get the values ​​if you need values ​​for the form.

Answer 3

Kevin F is right, there is no own way to do this.

Here is one way to do it if you really want to.

The code has an invisible range where the text is placed. Then we get the span width.

https://jsfiddle.net/r02ma1n0/1/

 var testdiv = $("#testdiv"); $("input").keydown( function(){ var ME = $(this); //Manual Way //var px = 6.5; //var txtlength = ME.val().length; //$(this).css({width: txtlength * px }); testdiv.html( ME.val() + "--"); var txtlength = testdiv.width(); ME.css({width: txtlength }); });