jQuery jquery输入数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9112970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery input number
提问by gordon33
Possible Duplicate:
Is it possible to customize an input field for amounts with +- buttons?
可能的重复：
是否可以使用 +- 按钮自定义金额的输入字段？
how to make + (plus) and - (minus) value buttons for
如何制作 +（加号）和 -（减号）值按钮
<input type="number" class="numbertype" value="10">?
<input type="number" class="numbertype" value="10">?
I think it's possible to do with jQuery or maybe simple javascipt, but i don't know how..
我认为可以使用 jQuery 或简单的 javascipt，但我不知道如何..
I want do something like this :
我想做这样的事情：
when you push on + button, value will be bigger for 1 (0,12,3,4,5,6.... 10000)
当您按下 + 按钮时，1 (0,12,3,4,5,6.... 10000) 的值会更大
when you push on - button, value will be smaller for 1 (10,9,8,7,6,5,4... 0)
当您按下 - 按钮时，1 (10,9,8,7,6,5,4...0) 的值会更小
回答by hunter
$("#minus,#plus").click(function(){
var value = parseInt($(".numbertype").val(), 10);
$(".numbertype").val(value + $(this).is("#minus") ? -1 : 1);
});
I just wanted to see how to do it myself. Here's a toggle that will keep going on mouse down:
我只是想看看如何自己做。这是一个将在鼠标按下时继续进行的切换：
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);
});
});
working example: http://jsfiddle.net/M4BAt/5/
工作示例：http: //jsfiddle.net/M4BAt/5/
回答by Hristo Petev
You can use the kendo.iu it has predefined control satisfying your wishes even more.It is very easy to implement and works great. I have already used it. No complains.
您可以使用 kendo.iu 它具有预定义的控件，更能满足您的愿望。它非常容易实现并且效果很好。我已经用过了。没有抱怨。
回答by Kanishka Panamaldeniya
$('#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);
});
回答by jfriend00
If you substitute the images you want for the plus/minus buttons, this would work:
如果你用你想要的图像代替加号/减号按钮，这会起作用：
<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);
});
Working example: http://jsfiddle.net/jfriend00/FxEv3/
工作示例：http: //jsfiddle.net/jfriend00/FxEv3/
With images, the HTML would look like this (using your image URLs):
对于图像，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>
