How can I trim an input element's width to the size of the initial text?

Question

Can I set the initial width of an input element to be large enough to just surround the initial text? Example of what I want to achieve: Silverlight app example.

I've tried setting the width property but it doesn't give me what I want:

<input type="text" style ="width: auto;" value="Default value"></input>
<input type="text" style ="width: 2%;" value ="Longer default value"></input>
<input type="text" style ="width: 100%;"value="Default value"></input>

I either get excess white space or the text is truncated.

Is this possible?

I'm targeting HTML5 browsers only (IE9+, Chrome, FF), so CSS3 solutions would be fine. Javascript solutions welcomed too.

Thanks

Answer 1

I think the easiest solution is to use jQuery to set the widths:

$.each($('input'), function(){
    $(this).css('width',(($(this).val().length) * 6 + 'px'));
});

Multiply by 6 seemed to be the best with default font. You might need to adjust it if you have used custom fonts for inputs.

Demo: http://jsfiddle.net/2479t/

Answer 2

<input type="text"  placeholder="Default value" value="Default value"></input>
<input type="text"  placeholder ="Longer default value" value="Longer default value"></input>
<input type="text"  placeholder="Default value" value="Default value"></input>

Answer 3

Demo

html

<div class="resizing-input">
    First: <input type="text" placeholder="placeholder" value="Default value"/>
    <span  style="display:none"></span>
</div><br>
<div class="resizing-input">
    Second: <input type="text" value ="Longer default value"/>
    <span  style="display:none"></span>
</div><br>
<div class="resizing-input">
    Third: <input type="text" value ="Longer default value longer still longer"/>
    <span  style="display:none"></span>
</div><br>
<div class="resizing-input">
    First: <input type="text" placeholder="with placeholder as well"/>
    <span  style="display:none"></span>
</div><br>

css

.resizing-input input, .resizing-input span {
    font-size: 12px;
    font-family: Sans-serif;
    white-space: pre;
    padding: 5px;
}

js

$(document).ready(function () {
    var $inputs = $('.resizing-input');

    // Resize based on text if text.length > 0
    // Otherwise resize based on the placeholder
    function resizeForText(text) {
        var $this = $(this);
        if (!text.trim()) {
            text = $this.attr('placeholder').trim();
        }
        var $span = $this.parent().find('span');
        $span.text(text);
        var $inputSize = $span.width();
        $this.css("width", $inputSize);
    }

    $inputs.find('input').keypress(function (e) {
        if (e.which && e.charCode) {
            var c = String.fromCharCode(e.keyCode | e.charCode);
            var $this = $(this);
            resizeForText.call($this, $this.val() + c);
        }
    });

    // Backspace event only fires for keyup
    $inputs.find('input').keyup(function (e) { 
        if (e.keyCode === 8 || e.keyCode === 46) {
            resizeForText.call($(this), $(this).val());
        }
    });

    $inputs.find('input').each(function () {
        var $this = $(this);
        resizeForText.call($this, $this.val())
    });
});

source : Adjust width of input field to its input

Answer 4

Use this

var input = document.getElementById ("myInput");           
input.style.width = (input.value.length * 7) + "px";

You can change 7 to 6 0r 8 according to yout text size

and for setting it dynamically on keyPress

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

SEE DEMO HERE

Answer 5

I came across this jsfiddle: this might help you

html:

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

css:

input {
width: auto;
min-width: 0px;
max-width: 300px;
transition: width 0.25s; }

JS:

check the fiddle for the js code