jquery 输入数字

Question

可能的重复：
是否可以自定义输入字段对于带有 +- 按钮的金额？

制作 +（加号）和 -（减号）值按钮

如何为< /代码>？

我认为可以使用 jQuery 或简单的 javascipt 来完成，但我不知道如何..

我想做这样的事情：

当您按下 + 按钮时，数值将变大 1 (0,12,3,4,5,6.... 10000)

当您按下 - 按钮时，数值将变 大小于 1 (10,9,8,7,6,5,4...0)

Answer 1

$("#minus,#plus").click(function(){
    var value = parseInt($(".numbertype").val(), 10);
    $(".numbertype").val(value + $(this).is("#minus") ? -1 : 1);
});

---

我只是想看看自己该怎么做。这是一个在鼠标按下时继续进行的切换：

var i = null;
var d = 0;
var $numbertype = null;

function ToggleValue() {
    $numbertype.val(parseInt($numbertype.val(), 10) + d);
}

$(function() {
    $numbertype = $(".numbertype");

    $("#minus,#plus").mousedown(function() {
        d = $(this).is("#minus") ? -1 : 1;
        i = setInterval(ToggleValue, 100);
    });

    $("#minus,#plus").on("mouseup mouseout", function() {
        clearInterval(i);
    });
});

工作示例： http://jsfiddle.net/M4BAt/5/

Answer 2

$('#plus_but').click(function(){

        var val = $('.numbertype').val();

        var new_val = parseInt($('.numbertype').val(),10) + 1 ;

       $('.numbertype').val(new_val); 

});


$('#minus_but').click(function(){

        var val = $('.numbertype').val();

        var new_val = parseInt($('.numbertype').val(),10) - 1 ;

       $('.numbertype').val(new_val); 

});

Answer 3

如果您用所需的图像替换加号/减号按钮，这将起作用：

<span class="plusminusunit">
    <span class="minus">-</span> 
    <input type="number" class="numbertype" value="10">
    <span class="plus">+</span>
</span>

$(".plus").click(function() {
    var item = $(this).closest(".plusminusunit").find("input");
    item.val(Number(item.val()) + 1); 
});
$(".minus").click(function() {
    var item = $(this).closest(".plusminusunit").find("input");
    item.val(Number(item.val()) - 1); 
});

工作示例： http://jsfiddle .net/jfriend00/FxEv3/

对于图像，HTML 将如下所示（使用图像 URL）：

<span class="plusminusunit">
    <img class="minus" src="http://lt.tonybet.com/assets/shared/mikro_tv-50ee396d59d5c38f979ad3fd93578f4f.png"> 
    <input type="number" class="numbertype" value="10">
    <img class="plus" src="http://lt.tonybet.com/assets/shared/mikro_tv-50ee396d59d5c38f979ad3fd93578f4f.png">
</span>

Answer 4

您可以使用kendo.iu，它具有预定义的控件，更能满足您的愿望。它非常容易实现并且效果很好。我已经用过了。没有抱怨。

http://demos.kendoui.c​​om/web/numerictextbox/index.html