javascript jQuery 输入数字微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26603423/
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 spinner
提问by o-O
I have this code for jQuery spinner up-down number :
我有 jQuery spinner up-down number 的代码：
HTML:
HTML：
<div class="container">
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<div class="btn btn-default"><i class="fa fa-caret-up"></i></div>
<div class="btn btn-default"><i class="fa fa-caret-down"></i></div>
</div>
</div>
</div>
JS:
JS：
(function ($) {
$('.spinner .btn:first-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
This Worked But I need to add two option:
这有效但我需要添加两个选项：
- prevent user add number to input
- set Maximum and Minimum for number
- 防止用户添加数字输入
- 设置数字的最大值和最小值
How do add this option?!
怎么加这个选项？！
DEMO FIDDLE
演示小提琴
回答by sebbzzz
Change:
改变：
<input type="text" class="form-control" value="42">
To:
到：
<input type="number" min="0" max="10" steps="1" class="form-control" value="5">
I didn't quite understand from your question if you wanted the user to be able to change the value or not, in the case that you don't want them to change the value, just add the readonly attribute to the input field, like this
我不太明白您的问题是否希望用户能够更改该值，如果您不希望他们更改该值，只需将 readonly 属性添加到输入字段，例如这
<input type="number" min="0" max="10" steps="1" class="form-control" value="5" readonly>
回答by Michael Smith
To do this all with jQuery which i assume you want:
要使用 jQuery 完成这一切，我假设您想要：
$(document).ready(function(){
//Stop people from typing
$('.spinner input').keydown(function(e){
e.preventDefault();
return false;
});
var minNumber = 1;
var maxNumber = 10;
$('.spinner .btn:first-of-type').on('click', function() {
if($('.spinner input').val() == maxNumber){
return false;
}else{
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
}
});
$('.spinner .btn:last-of-type').on('click', function() {
if($('.spinner input').val() == minNumber){
return false;
}else{
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
}
});
});
I haven't check but should be pretty accurate
我没有检查，但应该很准确
Working Fiddle: http://jsfiddle.net/7jtLa3py/3/
工作小提琴：http: //jsfiddle.net/7jtLa3py/3/
回答by ?_?
Better Ways :
更好的方法：
bootstrap snipper worked easy:
bootstrap snipper 工作起来很简单：
HTML
HTML
<input type="text" class="aSpinEdit" />
Javascript
Javascript
$('.aSpinEdit').spinedit({
minimum: -10,
maximum: 50,
step: 1
});
回答by Jivanysh Sohoni
Assuming you have to send that data back to the server, setting the input readonly attribute and adding some limits to the input value its fairly easy. Here's the demo http://jsbin.com/yebawihune/7/
假设您必须将该数据发送回服务器，设置 input readonly 属性并为输入值添加一些限制相当容易。这是演示 http://jsbin.com/yebawihune/7/
回答by Antonio Delacruz
With this you can dynamically add as many spinners as you want that are cross browser compatible (even IE). Of course you have to have included the needed js and css files for jquery.
有了这个，您可以根据需要动态添加任意数量的跨浏览器兼容（甚至 IE）的微调器。当然，您必须包含 jquery 所需的 js 和 css 文件。
First you have to create your input. Keep note of the id as you will use that later. I always just put the same value for the id and name parameters in the input.
首先，您必须创建您的输入。记下 id，因为您稍后会用到它。我总是在输入中为 id 和 name 参数设置相同的值。
<input id="elementName" name="elementName">
<input id="elementName" name="elementName">
Then put this in your head section.
然后把它放在你的头部部分。
function createSpinner(elemName, elemVal, elemMin, elemMax, elemStep){
var mySpinner = $( '#' + elemName ).spinner({
min: elemMin,
max: elemMax,
step: elemStep,
change: function( event, ui ) {
var typedVal = $( '#' + elemName ).spinner( 'value' );
if (typedVal < elemMin || typedVal > elemMax) {
alert('Value must be between ' + elemMin + ' and ' + elemMax);
$('#' + elemName).spinner('value', elemVal);
}
}
});
$('#' + elemName).spinner('value', elemVal);
};
Then you just call the function, passing the needed parameters (the first parameter will be the value of the ID of your input).
然后您只需调用该函数，传递所需的参数（第一个参数将是您输入的 ID 的值）。
createSpinner('elementName','0','0','10000','1');
