web-dev-qa-db-fra.com

jquery: définit l'entrée min max dans le type d'option

J'ai cette partie de code

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

Sur le terrain, je peux insérer un nombre> 10 et <2.

Comment puis-je le limiter?

jquerynumbersmaxmin
11
user2519913

ajoutez une fonction onchange et définissez la valeur si elle est en dehors de la plage.

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

25
caspian

L’approche que j’ai utilisée ici (bien que j’ai créé un plugin pour le faire) consiste à vérifier si la valeur entrée se situe dans la plage définie par les attributs min et max, si est nous conservons cette valeur; si pas, nous testons si la valeur entrée est inférieure à la valeur min. Si c'est le cas, nous définissons la valeur sur la valeur min et si non (ce qui implique que la valeur doit être supérieure à max) nous définissons la valeur sur l'attribut 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();

Démo de JS Fiddle .

Ceci est quelque peu naïf, en ce que le plugin restrict() ne vérifie pas si le type de l'élément <input> est de number (pour le moment).

Edited pour ajouter un léger contrôle de santé afin de vérifier que l'élément est bien de 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);

Démo de JS Fiddle .

4
David Thomas

Un moyen plus simple et dynamique pour ne pas autoriser l'utilisateur à saisir ou coller des valeurs en dehors de l'intervalle, ni aucun autre caractère non numérique (sans la nécessité d'analyser ou de détecter manuellement les clés):

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

Si cet événement spécifique est uniquement nécessaire pour une entrée particulière, utilisez la variable id, c'est-à-dire $('#contact').on(...).Explication: this Fonctions mathématiques comparez avec Infinity en l'absence d'argument.

Note: mouseup peut également être utilisé pour empêcher l'utilisateur de coller ou d'utiliser les flèches avec le curseur.

2
Armfoot

jquery set min max input (tout type)

définir l'attribut min et l'attribut max dans la saisie

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

vous pouvez changer min et max

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

EXEMPLE: jsfiddle

1
Mohammad

Vous pouvez avoir une fonction générique pour le faire sur n’importe quel élément d’étape d’entrée -

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

VIOLON

0
Johnbabu Koppolu

Vous pouvez écrire juste avec jquery:

$('#contact').prop('minLength', 2);
$('#contact').prop('maxLength', 10);
0
Акынбек Бержанов