web-dev-qa-db-fra.com

Le nombre HTML entré min et max ne fonctionne pas correctement

J'ai le champ de saisie type=number et j'ai défini les valeurs min et max:

<input type="number" min="0" max="23" value="14">

Lorsque je modifie l'heure dans l'interface utilisateur affichée à l'aide des petites flèches situées à droite du champ de saisie, tout fonctionne correctement. Je ne peux ni aller au-dessus de 23 ni au-dessous de 0. Cependant, lorsque je saisis les chiffres manuellement (à l'aide du clavier ), aucune de ces restrictions n’est effective.

Existe-t-il un moyen d’empêcher quiconque de saisir le numéro de son choix?

htmlhtml5
28
Tomas Dohnal

Avec HTML5 max et min, vous pouvez uniquement limiter les valeurs pour entrer des chiffres. Mais vous devez utiliser JavaScript ou jQuery pour effectuer ce type de changement. Une des idées que j'ai est d'utiliser les attributs data- et de sauvegarder l'ancienne valeur:

$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" min="0" max="23" value="14" />

11
Praveen Kumar Purushothaman

Peut-être qu'au lieu d'utiliser le type "numéro", vous pourriez utiliser le type "plage", ce qui empêcherait l'utilisateur de saisir des chiffres car il utilise un curseur et si vous souhaitez le configurer pour afficher le numéro actuel, utilisez simplement JavaScript

13
George Wilson

Dans certains cas, pattern peut être utilisé à la place de min et max. Cela fonctionne correctement avec required.

6
user2061057
$(document).ready(function(){
    $('input[type="number"]').on('keyup',function(){
        v = parseInt($(this).val());
        min = parseInt($(this).attr('min'));
        max = parseInt($(this).attr('max'));

        /*if (v < min){
            $(this).val(min);
        } else */if (v > max){
            $(this).val(max);
        }
    })
})

Voici ma contribution. Notez que v <min est mis en commentaire car j'utilise Bootstrap, qui indique gentiment à l'utilisateur que la plage est en dehors de la plage 1-100 mais que, rarement, elle ne surligne pas> max!

1
Antony

Un attribut event listener, no data-.

Vous pouvez simplement l'empêcher en utilisant le script suivant:

$(document).on('keyup', 'input[name=quantity]', function () {
    var _this = $(this);
    var min = parseInt(_this.attr('min')) || 1; // if min attribute is not defined, 1 is default
    var max = parseInt(_this.attr('max')) || 100; // if max attribute is not defined, 100 is default
    var val = parseInt(_this.val()) || (min - 1); // if input char is not a number the value will be (min - 1) so first condition will be true
    if(val < min)
        _this.val( min );
    if(val > max)
        _this.val( max );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="form-control" name="quantity" max="250" min="1" value="">

Le seul problème est : vous ne pouvez pas saisir - pour obtenir des nombres négatifs si votre min est inférieur à 0

0
Pars