jquery：在选项类型编号中设置最小最大输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24353748/
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: set min max input in option type number
提问by user2519913
I have this part of code
我有这部分代码
<input type="number" min="2" max="10" step="2" id="contact" oninput="new_sum">
In the field I can insert a number > 10 and < 2.
在该字段中，我可以插入一个 > 10 和 < 2 的数字。
How can I limit it?
我怎样才能限制它？
回答by caspian
add an onchangefunction and set the value if it's out of the range.
onchange如果超出范围，则添加一个函数并设置该值。
$(function () {
$( "#numberBox" ).change(function() {
var max = parseInt($(this).attr('max'));
var min = parseInt($(this).attr('min'));
if ($(this).val() > max)
{
$(this).val(max);
}
else if ($(this).val() < min)
{
$(this).val(min);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberBox" type="number" min="2" max="10" step="2" id="contact" />回答by Armfoot
A simpler and dynamic way for not allowingthe user to type or paste values outside the intervalnor any other non-numeric character (without the need for manually parsing or detecting keys):
一种更简单和动态的方式，不允许用户在区间之外键入或粘贴值或任何其他非数字字符（无需手动解析或检测键）：
$('input[type=number]').on('mouseup keyup', function () {
$(this).val(Math.min(10, Math.max(2, $(this).val())));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="2" id="contact">If this specific event is only needed for a particular input use the id, i.e. $('#contact').on(...).
Explanation: these Math functionscompare with Infinityin the absence of an argument.
如果此特定事件仅用于特定输入，请使用id，即$('#contact').on(...)。
说明：这些数学函数Infinity在没有参数的情况下进行比较。
Note: mouseupcan also be used to prevent the user to paste or use the arrows with the cursor.
注意：mouseup也可用于防止用户粘贴或使用带有光标的箭头。
回答by David says reinstate Monica
The approach I've used here (though I've created a plugin to do so) is to check whether the entered value is in the range defined by the minand maxattributes, if it iswe keep that value; if notwe test whether the entered value is less than the minvalue, if it is then we set the value tothe minvalue and if not (implying that the value must be greater than the max) we set the value to the maxattribute:
我在这里使用的方法（尽管我已经创建了一个插件来这样做）是检查输入的值是否在min和max属性定义的范围内，如果是，我们保留该值；如果不是，我们测试输入的值是否小于该min值，如果是，则将值设置为该min值，如果不是（暗示该值必须大于max），我们将值设置为该max属性：
(function ($) {
$.fn.restrict = function () {
// returns the collection returned by the selector, over which we iterate:
return this.each(function(){
// binding a change event-handler:
$(this).on('change', function(){
// caching the 'this' (the current 'input'):
var _self = this,
// creating numbers from the entered-value,
// the min and the max:
v = parseFloat(_self.value),
min = parseFloat(_self.min),
max = parseFloat(_self.max);
// if it's in the range we leave the value alone (or set
// it back to the entered value):
if (v >= min && v <= max){
_self.value = v;
}
else {
// otherwise we test to see if it's less than the min,
// if it is we reset the value to the min, otherwise we reset
// to the max:
_self.value = v < min ? min : max;
}
});
});
};
})(jQuery);
$('#contact').restrict();
This is somewhat naive, in that the restrict()plugin doesn't test whether the <input>element's type is of number(yet).
这有点天真，因为restrict()插件不测试<input>元素的类型是否为number(yet)。
Editedto add a slight sanity check to check that the element is, in fact, of type="number":
编辑添加了一个轻微的健全性检查，以检查该元素实际上是type="number"：
(function ($) {
$.fn.restrict = function () {
return this.each(function(){
if (this.type && 'number' === this.type.toLowerCase()) {
$(this).on('change', function(){
var _self = this,
v = parseFloat(_self.value),
min = parseFloat(_self.min),
max = parseFloat(_self.max);
if (v >= min && v <= max){
_self.value = v;
}
else {
_self.value = v < min ? min : max;
}
});
}
});
};
})(jQuery);
回答by Mohammad
jquery set min max input (all type)
jquery 设置最小最大输入（所有类型）
set attribute min & attribute max in tag input
在标签输入中设置属性最小值和属性最大值
HTML
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<input type="tel" class="form-control text-right ltr" data-min_max data-min="0" data-max="100" data-toggle="just_number" />
you can change min & max
你可以改变最小和最大
data-min="0" data-max="100"
数据最小=“0”数据最大=“100”
Jquery
查询
$(document).on('keyup', '[data-min_max]', function(e){
var min = parseInt($(this).data('min'));
var max = parseInt($(this).data('max'));
var val = parseInt($(this).val());
if(val > max)
{
$(this).val(max);
return false;
}
else if(val < min)
{
$(this).val(min);
return false;
}
});
$(document).on('keydown', '[data-toggle=just_number]', function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
EXAMPLE : jsfiddle
示例：jsfiddle
回答by Акынбек Бержанов
You can write just with jquery:
你可以只用 jquery 编写：
$('#contact').prop('minLength', 2);
$('#contact').prop('maxLength', 10);
回答by Johnbabu Koppolu
You can have a generic function to do this on any input step elements --
您可以使用通用函数在任何输入步骤元素上执行此操作——
$(function () {
var limitInput = function () {
var value = parseInt(this.value, 10);
var max = parseInt(this.max, 10);
var min = parseInt(this.min, 10);
if (value > max) {
this.value = max;
} else if (value < min) {
this.value = min
}
};
$("#numberBox").change(limitInput);
});
