Question

我正在尝试编制一个计数器。

这是我的 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或3digit时，我希望输入标记的大小自动递增。

只能用css。

Answer 1

我认为在这种情况下最好的解决方案是不使用输入标签，而是用span标签替换它。 span是一个内联元素，宽度将根据其内容自动递增。

当我移动到跨度时，jquery将会改变。而不是val()我们应该使用text()

演示小提琴http://jsfiddle.net/ssxx8/11/

Answer 2

你可以做一些大致相似的事情：

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

Answer 3

试试这个

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

Answer 4

试试这个

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

Answer 5

你需要这样做：

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

自动递增输入标签的宽度

5 个答案: