Empêcher l’utilisateur de saisir l’entrée à la valeur maximale

J’aimerais que l’utilisateur soit empêché de taper plus si la valeur est supérieure à 100. Jusqu’à présent, j’ai lu les articles suivants:

$('.equipCatValidation').keyup(function(e){ if ($(this).val() > 100) { e.preventDefault(); } });

Pour confirmer, je veux que la valeur ne soit pas la longueur de la chaîne et qu’elle ne peut pas dépasser 100.

Toutefois, cela n’empêche pas d’autres interventions sur le terrain. Qu’est-ce que je rate.

Solution: http://jsfiddle.net/9TP3e/

Vérifier keyup est trop tard, l’événement de l’ajout du personnage est déjà arrivé. Vous devez utiliser keydown. Mais vous voulez également vous assurer que la valeur n’est pas> 100, vous devez donc également utiliser keyup pour permettre à js de vérifier la valeur ensuite.

Vous devez également autoriser les personnes à supprimer la valeur, sinon, une fois que celle-ci est> 100, rien ne peut être modifié.

 $('.equipCatValidation').on('keydown keyup', function(e){ if ($(this).val() > 100 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(100); } });

http://jsfiddle.net/EBs33/1/

Fondamentalement, les événements de frappe sont déclenchés avant d’accepter la valeur actuelle. Ainsi, lorsque vous appuyez sur n’importe quelle touche, l’événement de frappe est enregistré mais vous n’obtenez pas la valeur / le résultat mis à jour pour la touche récemment enfoncée. Ainsi, pour obtenir la dernière touche enfoncée, nous pouvons utiliser la méthode fromCharCode et la concaténer avec la valeur obtenue dans la zone de texte. C’est tout,

HTML:

jQuery:

 $("#inputBox").on("keypress", function(e){ var currentValue = Ssortingng.fromCharCode(e.which); var finalValue = $(this).val() + currentValue; if(finalValue > 100){ e.preventDefault(); } });

jsFiddle

Peut-être que keydown au lieu de keyup ?

EDIT: Il existe un commentaire valide ici – Empêcher l’utilisateur de saisir une entrée avec une valeur maximale – pour éviter que vous deviez probablement stocker la valeur précédente et la restaurer si nécessaire.

C’est une mauvaise interface utilisateur de désactiver l’entrée si un utilisateur entre une valeur incorrecte. Je suppose que vous voulez simplement mettre une valeur maximale que l’utilisateur ne peut pas dépasser. Si tel est le cas, vous pouvez soit bloquer la valeur, soit utiliser l’atsortingbut max dans votre balise:

Si vous entrez une valeur non valide, l’entrée deviendra rouge et vous ne pourrez pas envoyer le formulaire.

En réponse à Popnoodles répondre ci-dessus,

Il est considéré comme une bonne pratique d’utiliser les opérateurs d’égalité de type sécurisé === et! == au lieu de leurs équivalents habituels == et! =, Car dans Javascript, cela peut / peut entraîner des contraintes inopinées de type. Donc ça devrait être

  $('.equipCatValidation').on('keydown keyup', function(e){ if ($(this).val() > 100 && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(100); } });

 $('.equipCatValidation').on('keypress', function(e){ var $element = $(this); var value = Number($element.val()); var key = Number(e.key); if (Number.isInteger(key)) { value = Number("" + value + key); } if (value > 100) { return false; } });