jquery：在选项类型编号中设置最小最大输入
我有这部分代码
在该字段中，我可以插入数> 10且<2。
我怎么能限制它？
添加一个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); } }); });
我在这里使用的方法（虽然我创建了一个插件）是检查输入的值是否在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();
JS小提琴演示 。
这有点天真，因为restrict()插件不会测试元素的类型是否为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);
JS小提琴演示 。
一种更简单，更动态的方法， 不允许用户在区间外键入或粘贴值，也不允许任何其他非数字字符（无需手动解析或检测键）：
$('input[type=number]').on('mouseup keyup', function () { $(this).val(Math.min(10, Math.max(2, $(this).val()))); });
jquery设置最小最大输入（所有类型）
在标签输入中设置属性min和attribute max
HTML
你可以改变最小和最大
data-min =“0”data-max =“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(); } });
示例： jsfiddle
您可以使用通用函数在任何输入步骤元素上执行此操作 –
$(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); });
小提琴
你可以用jquery写：
$('#contact').prop('minLength', 2); $('#contact').prop('maxLength', 10);