Auto Increment width входной метки

Я пытаюсь закодировать счетчик.Auto Increment width входной метки

Вот мой 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); 
});

Я хочу размер входного тега автоприращение, когда содержание внутри входного тега будет 2DIGIT или 3-значное.

возможно только с css.

источник

2014-02-12 shubendrak

[Этот вопрос] (http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript) должен помочь. –

Я думаю, что лучшим решением в этом случае было бы не использовать входной тег, вместо того, чтобы заменить его тег диапазона. span - это встроенный элемент, и ширина будет автоматически увеличиваться на основе его содержимого.

Как я перехожу к диапазону, jquery изменится. и вместо val() мы должны использовать text()

Дема скрипка http://jsfiddle.net/ssxx8/11/

источник

2014-02-12 06:04:02 shubendrak

кто-то исправил ошибку в этой скрипке, см. Http://jsfiddle.net/ssxx8/12/ –

да, большое спасибо. – shubendrak

Вы можете сделать что-то примерно похожее на это:

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

источник

2014-02-12 05:04:27 danwarfel

хочу css решение для этого – shubendrak

Попробуйте

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

источник

2014-02-12 05:12:10 Amit

Попробуйте

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

источник

2014-02-12 05:20:21

Мой вопрос? Извините, не понял. –

Вы должны подойти так:

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

См LIVE DEMO

источник

2014-02-12 05:25:13

Auto Increment width входной метки

ответ

Смежные вопросы