web-dev-qa-db-fra.com

JavaScript KeyCode vs CharCode

Le problème:

  • Limitez les caractères autorisés dans une entrée HTML à a-z A-Z uniquement.
  • Pour les besoins de l'entreprise, cela doit être fait sur KeyPress afin que le caractère ne soit tout simplement pas autorisé à apparaître dans l'entrée.
  • Tabulation, entrée, flèches, retour arrière, décalage sont tous autorisés. L'utilisateur doit pouvoir se déplacer librement dans et hors de la zone de texte, supprimer des caractères, etc.

Ceci est le point de départ de mon code ...

var keyCode = (e.keyCode ? e.keyCode : e.which);

Cependant, chaque valeur que j'obtiens keyCode ne correspond pas à any des diagrammes de caractères que j'ai vus sur le Web. Par exemple, le caractère "h" me donne un code retour de 104.

KeyCode est-il différent de CharCode? Quel code contient les caractères de contrôle? Dois-je convertir?

Comment puis-je limiter l'entrée à a-z A-Z et autoriser les clés dont j'ai besoin en JavaScript?

javascriptkeycode
41
Remotec

Les réponses à toutes vos questions se trouvent sur la page suivante .

... mais en résumé:

  • Le seul événement à partir duquel vous pouvez obtenir de manière fiable des informations de caractère (par opposition aux informations de code clé) est l'événement keypress.
  • Dans l'événement keypress, tous les navigateurs sauf IE <= 8 stockent le code de caractère dans la propriété which de l'événement. La plupart de ces navigateurs, mais pas tous, stockent également le code de caractère dans la propriété charCode.
  • Dans l'événement keypress, IE <= 8 stocke le code de caractère dans la propriété keyCode.

Cela signifie que pour obtenir le code de caractère correspondant à la pression de touche, ce qui suit fonctionnera partout, en supposant qu'un objet d'événement de pression de touche est stocké dans une variable appelée e:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

Cela vous renverra généralement un code de caractère là où il existe et 0 sinon. Il y a quelques cas où vous obtiendrez une valeur non nulle alors que vous ne devriez pas:

  • Dans Opera <10,50 pour les clés Insert, Delete, Home et End
  • Dans les versions récentes de Konqueror pour les touches sans caractère.

La solution de contournement pour le premier problème est un peu compliquée et nécessite également l'utilisation de l'événement keydown.

61
Tim Down

Bon chagrin. KeyboardEvent. [Key, char, keyCode, charCode, which] sont tous obsolètes ou présentent actuellement des bogues en suspens selon les documents de l'API de Mozilla - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent . Même JQuery passe la balle sur celui-ci et laisse l'utilisateur le comprendre https://api.jquery.com/keydown/ .

10
nicopolyptic

En fait, 104 est le code ASCII pour les "h" en minuscules. Pour obtenir le code ASCII du caractère tapé sur la touche, vous pouvez simplement utiliser e.which || e.keyCode, et vous n'avez pas à vous soucier des touches enfoncées car pour le texte tapé, la pression de touche est répétée automatiquement dans tous les navigateurs (selon l'excellent http://unixpapa.com/js/key.html ).

Donc, tout ce dont vous avez vraiment besoin est:

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Essayez-le: http://jsfiddle.net/wcDCJ/1/

(Les codes ASCII proviennent de http://en.wikipedia.org/wiki/Ascii )

5
Han Seoul-Oh

onKeyPress a différents codes pour les lettres majuscules et minuscules. Vous trouveriez probablement que l'activation du verrouillage des majuscules et la saisie de votre lettre vous donneraient le code que vous attendez

onKeyUp et onKeyDown ont les mêmes codes de caractères pour les lettres majuscules et minuscules. Il recommande d'utiliser onKeyUp car c'est le plus proche de onKeyPress

2
James Long

/ * Vous n'obtiendrez pas de keyCode lors de la pression de touche pour les touches non imprimables, pourquoi ne pas les capturer lors de la touche enfoncée? * /

function passkeycode(e){
    e= e || window.event;
    var xtrakeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    kc= e.keyCode;
    if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true;
    else return false;
}

inputelement.onkeydown=passkeycode;

kc> 64 && kc <91 // a-zA-Z

xtrakeys ['k' + entier]) définit les codes clés spéciaux autorisés

0
kennebec

Voici un exemple de balisage:

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

La logique suivante peut être utilisée pour intercepter les entrées au clavier (dans ce cas, via un wrapper prêt pour le document jQuery).

Cela peut sembler un peu maladroit, mais en gros, je vérifie tout ce que je veux autoriser (dans votre cas, les lettres A à Z ne respectent pas la casse) et ne faites rien. En d'autres termes, l'action par défaut est autorisée, mais toute entrée autre que alpha est interdite.

La navigation au clavier standard, comme les touches fléchées, Accueil, Fin, Tabulation, Retour arrière, Supprimer, etc., est vérifiée et autorisée.

REMARQUE: ce code a été écrit à l'origine pour satisfaire l'entrée utilisateur ne permettant que des valeurs alphanumériques (A - Z, a - z, 0 - 9), et j'ai laissé ces lignes intactes en tant que commentaires.

        <script>
            jQuery( document ).ready( function() {

                // keydown is used to filter input
                jQuery( "#formID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;
                    //console.log( _key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey );

                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // BACK,         TAB
                            ( _key === 8 || _key === 9 )    // normal keyboard nav
                        ){}

                        else if(
                            // END,           HOME,          LEFT,          UP,            RIGHT,         DOWN
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )  // normal keyboard nav
                        ){}

                        else if(
                            // DELETE
                            ( _key === 46 ) // normal keyboard nav
                        ){}

                        else if(
                            ( _key >= 65 && _key <= 90 )    // a- z

                            //( _key >= 48 && _key <=  57 && _shifted !== true ) ||   // 0 - 9 (unshifted)
                            //( _key >= 65 && _key <=  90 ) ||                        // a- z
                            //( _key >= 96 && _key <= 105 )                           // number pad 0- 9
                        ){}

                        else {
                            e.preventDefault();
                        }
                    }

                });
            });
        </script>
0
Mac