Geek asks and answers

Auto input tag enlargement width

I am trying to encode a counter.

Here is my JsFiddle

$('.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 automatically increase when the content inside the input tag becomes 2digit or 3digit.

only possible with css.

+3
source share
5 answers

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

When I go to range, jquery will change. and instead val()we should usetext()

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

+4
source

- :

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

try it

$('.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

0
source

try it

$('.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/

0
source

You need to approach like this:

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

Contact LIVE DEMO

0
source

More articles:


All Articles