jQuery: set min max wejścia w typie opcja numer

Question

mam tę część kodu

<input type="number" min="2" max="10" step="2" id="contact" oninput="new_sum"> 

W dziedzinie mogę wstawić numer> 10 i < 2.

Jak mogę ograniczyć go?

Answer 1

dodać funkcję onchange i ustawić wartość, jeśli jest poza zakresem.

$(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" />

Answer 2

Można mieć ogólną funkcję, aby to zrobić na wszelkich elementów krokowych wejście -

$(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); 
}); 

FIDDLE

Answer 3

podejścia Użyłem tutaj (choć Stworzyłem wtyczkę, aby to zrobić) jest sprawdzenie, czy wprowadzona wartość jest w zakresie określonym przez min i Atrybuty max, jeśli jest to jest zachowujemy tę wartość; jeśli nie testujemy, czy wprowadzona wartość jest mniejsza niż wartość min, jeśli następnie ustawimy wartość na wartość min, a jeśli nie (co oznacza, że ​​wartość musi być większa niż max), ustawiamy wartość do atrybutu 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 Fiddle demo.

To jest trochę naiwne, ponieważ wtyczka restrict() nie sprawdza, czy typ elementu <input> ma wartość number (jeszcze).

Zmieniano dodać niewielką testow, aby sprawdzić, czy element jest w rzeczywistości, z 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 Fiddle demo.

Answer 4

Można pisać tylko z jQuery:

$('#contact').prop('minLength', 2); 
$('#contact').prop('maxLength', 10); 

Answer 5

jquery wejście ustawione min max (wszystkich typów)

atrybut

zestaw min & max atrybutu w wejściu tag

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" /> 

można zmienić min. & maks

danych min = "0" danych 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(); 
    } 
}); 

PRZYKŁAD: jsfiddle

Answer 6

prostszy i dynamiczny sposób nie pozwalając z użytkownik na wpisz lub wklej wartości poza przedziałem ani żadnego innego nieliczbowego znaku (bez potrzeby ręcznego analizowania lub wykrywania kluczy):

$('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">

Jeżeli określone zdarzenie jest potrzebna tylko w przypadku korzystania z określonego wprowadzić id tj $('#contact').on(...). Wyjaśnienie: te Math functions w porównaniu z Infinity w przypadku braku argumentu.

Uwaga: mouseup mogą być również stosowane do zapobiegania użytkownikowi wklejenia lub za pomocą strzałek z kursorem.