CODEWITHSUNDEEP
javascriptjqueryhtmlformsinput
ObbyOss
ObbyOss

Reputation: 351

Dynamically Adjust HTML Text Input Width to Content

I can't quite find a clear answer on this, and excuse me if there is one I've missed.

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

I've created the below as an example. Currently, the boxes are far bigger than my placeholder text, causing huge amounts of white space, and it's obviously the same thing when I type in something.

I've tried width auto, some jQuery, and twine and bubble gum I found on the internet. But nothing has worked yet. 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

Upvotes: 20

Views: 62829

Answers (6)

KevynTD
KevynTD

Reputation: 682

WARNING: Experimental CSS technology (07/2024)

CSS field-sizing

We have the possibility to use the field-sizing: content; property.

It will make the input to dinamically grow and shrink according the text content:

<p>
  Default:<br>
  <input type="text" value="default value" />
</p>

<p>
  With <i>field-sizing: content</i> CSS:<br>
  <input type="text" style="field-sizing: content;" value="default value" />
</p>

It works well with min-width and max-width, so you can choose the min, resizable default and max size of the input.

Also works with textarea tag.

Just take care to see the browser implementation status before use it.

Tip: It is an experimental technology, so avoid using it in production projects.

Upvotes: 1

Vlad
Vlad

Reputation: 395

input.addEventListener('input', event => event.target.style.width = event.target.scrollWidth + 'px');

Unfortunately this will only increase the size of the input. If you delete characters the size will not decrease. For some use cases this is perfectly fine.

Upvotes: 2

pradeep
pradeep

Reputation: 790

Try with 'size' attribute. This will work even when you clear the text . Need jQuery to work this

<div>
    <input id="txt" type="text" style="max-width: 100%;" placeholder="name">
</div>
<script>
    $(document).ready(function() {
        var placeholderLen = $('#txt').attr('placeholder').length;
        // keep some default lenght
        placeholderLen = Math.max(5, placeholderLen);
        $('#txt').attr('size', placeholderLen);

        $('#txt').keydown(function() {
            var size = $(this).val().length;
            $(this).attr('size', Math.max(placeholderLen, size));
        });
    });
</script>

Upvotes: 1

Keval Bhatt
Keval Bhatt

Reputation: 6322

Use onkeypress even

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

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

And for placeholder on load use jquery and apply placeholder size in to input

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

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

And in css provide min-width

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

EDIT:

If you remove all text from input box then it will take placeholder value using focusout

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

$("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';
    }

});

Upvotes: 8

sudo rm -rf slash
sudo rm -rf slash

Reputation: 1254

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'll have to do some trickery to pick up the values if you need the values for a form.

Upvotes: 20

user4115765
user4115765

Reputation:

Kevin F is right, there is no native way to do it.

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

In the code, there is an invisible span where the text is placed. Then we retrieve the width of the span.

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  }); 
});

Upvotes: 1

Related Questions