Auto Increment width of an input tag

Question

I am trying to code an counter.

$('.substract-value').click(function(){
    val = $('#how-many').val();
    if (val == 1) 
        { }
    else
        $('#how-many').val(val-1);
});
$('.add-value').click(function(){
    val = $('#how-many').val();
    $('#how-many').val(parseInt(val)+1);
});

I want the size of the input tag to auto-increment when the content inside the input tag will become 2digit or 3digit.

is it possible only with css.

[This question](http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript) should help. — Mat J, Feb 12 '14 at 05:16

score 4 · Accepted Answer · answered Feb 12 '14 at 06:04

I think the best solution in this case would be not to use input tag, instead replace it with span tag. span is an inline element and the width will auto increment based on its content.

As i am moving to span, the jquery will change. and instead of val() we should use text()

Demo fiddle http://jsfiddle.net/ssxx8/11/

score 0 · Answer 2 · answered Feb 12 '14 at 05:04

You can do something roughly similar to this:

$(function() {
    var $howMany = $('#how-many'); // cache that

    $('.substract-value').click(function(){
        var val = $howMany.val();
        if (val == 1) { }
        else {
            $howMany.val(val-1);
            checkSize(val);
        }
    });
    $('.add-value').click(function(){
        var val = $('#how-many').val();
        $howMany.val(parseInt(val)+1);
        checkSize(val);
    });

    function checkSize(v) {
        if ( v > 9 ) {
            $howMany.css('width', '80px');
        } else if ( v < 9 ) {
            $howMany.css('width', '20px');
        };
    }
});

want a css solution for this – shubendrak Feb 12 '14 at 05:09 — shubendrak, Feb 12 '14 at 05:09

score 0 · Answer 3 · answered Feb 12 '14 at 05:12

Try this

$('.substract-value').click(function(){
    val = $('#how-many').val();
    if (val == 1) { }
    else
        $('#how-many').val(val-1);

   setWidth();
});
$('.add-value').click(function(){
    val = $('#how-many').val();
    $('#how-many').val(parseInt(val)+1);
    setWidth();
});


 var oneLetterWidth = 10;

 var minCharacters = 2;

 function setWidth() {
     var len = $("#how-many").val().length;
     if (len > minCharacters) {
         // increase width
         $("#how-many").width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $("#how-many").width(50);
     }
 }

DEMO

score 0 · Answer 4 · answered Feb 12 '14 at 05:20

Try this

$('.substract-value').click(function(){
    val = $('#how-many').val();
    if (val == 1) { }
    else
        $('#how-many').val(val-1);
    updateWidth(); 
});

$('.add-value').click(function(){
    val = $('#how-many').val();
    $('#how-many').val(parseInt(val)+1);
    updateWidth();
});

function updateWidth(){
    size = $('#how-many').val().length;
    size = size*7; // average width of a char is 7px
    $('#how-many').css('width',size);  
}

JSFIDDLE : http://jsfiddle.net/ssxx8/9/

My question? Sorry did not get you. – Abhishek Potnis Feb 19 '14 at 03:59 — Abhishek Potnis, Feb 19 '14 at 03:59

score 0 · Answer 5 · answered Feb 12 '14 at 05:25

You need to approach this way:

var obj = $('#how-many');
$('.substract-value').click(function () {
    var content = obj.val();
    if (content > 1) 
        obj.val(parseInt(obj.val()) - 1);
    obj.css("width", (obj.val().length * 10) + "px");
});
$('.add-value').click(function () {
    obj.val(parseInt(obj.val()) + 1);
    obj.css("width", (obj.val().length * 10) + "px");
});

Refer LIVE DEMO

Auto Increment width of an input tag

5 Answers5