retour arrière ne fonctionne pas pendant la validation dans firefox

J'ai écrit le code ci-dessous afin que les utilisateurs ne saisissent que des chiffres. Cela fonctionne bien dans tous les navigateurs sauf FireFoxretour arrière ne fonctionne pas pendant la validation dans firefox

Dans FireFox après avoir entré un nombre si les utilisateurs cliquent sur le retour arrière, il ne fonctionne pas correctement. Voici le code.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <script type="text/javascript"> 

     function getKeyCodeFromEvent(e) { 
      if (typeof e == "object" && typeof e.which == "number") { 
       return e.which; 
      } 
      return window.event.keyCode; 
     } 

     function checkEntry(e) { 
      var keyCode = this.getKeyCodeFromEvent(e); 
      var regularExpression = /^[0-9.]+$/; 
      return regularExpression.test(String.fromCharCode(keyCode)); 
     } 

    </script> 
</head> 
<body> 
    <input type="text" onkeypress="return checkEntry(event);" /> 
</body> 
</html>

Source

2015-10-16 user804401

Où êtes-vous de contrôle pour les backspace (8) ou la suppression (46) keycode? Et les touches fléchées aussi. Il pourrait presque être plus facile de simplement valider l'entrée après. – nils

Quand quelqu'un appuie sur la touche backspace, vous obtenez la valeur 8 de getKeyCodeFromEvent. L'exécuter dans String.fromCharCode(8); puis renvoie la valeur unicode suivante: ``. Cela ne correspond pas à votre regex, donc il échoue.

Vous pouvez résoudre ce problème en vérifiant que les touches retour arrière, supprimer, tabulation, gauche et droite sont autorisées, avant de les convertir en valeurs String. Vous devrez cependant utiliser l'événement keydown, car keypress ne renvoie pas de valeurs pour certaines clés, telles que la gauche ou la droite. Soyez prudent lorsque vous limitez les mouvements de l'utilisateur, car cela pourrait facilement mettre les gens en colère lorsque le site ne fonctionne pas comme prévu.

<script> 

    function getKeyCodeFromEvent(e) { 
     if (typeof e == "object" && typeof e.which == "number") { 
      return e.which; 
     } 
     return window.event.keyCode; 
    } 

    function checkEntry(e) { 

     var keyCode = getKeyCodeFromEvent(e); 
     var regularExpression = /^[0-9.]+$/; 

     // If the key is backspace, tab, left, right or delete 
     if([8,9,37,39,46].indexOf(keyCode) !== -1 || e.ctrlKey || e.metaKey) { 
      return true; 
     } 
     if(!regularExpression.test(String.fromCharCode(keyCode))) { 
      e.preventDefault(); 
      e.returnValue = false; 
      return false; 
     } 
    } 

    // I took the liberty of moving your event from the HTML into JavaScript, where it belongs 
    document.addEventListener("DOMContentLoaded", function() { 
     document.getElementById('numberinput').addEventListener("keydown", checkEntry, false); 
    }, false); 
</script> 
<input type="text" id="numberinput" />

http://jsfiddle.net/8hzwLjfz/6/

Source

2015-10-16 11:41:15 nils

j'ai réalisé dans firefox il ne me permet pas de cliquer à droite, à gauche .. flèches aussi, Aussi, si ctrl + une combinaison ne fonctionne pas, y at-il un moyen d'atteindre cela aussi – user804401

Mis à jour pour permettre les commandes de touches ctrl et cmd sur mac aussi bien. Je ne sais vraiment pas si c'est une très bonne idée pour commencer ... – nils

retour arrière ne fonctionne pas pendant la validation dans firefox

Répondre

Questions connexes