web-dev-qa-db-fra.com

Comment savoir si .keyup () est une clé de caractère (jQuery)

Comment savoir si .keyup () est une clé de caractère (jQuery)

$("input").keyup(function() {

if (key is a character) { //such as a b A b c 5 3 2 $ # ^ ! ^ * # ...etc not enter key or shift or Esc or space ...etc
/* Do stuff */
}

});
javascriptjqueryeventskeyboardkeycode
60
faressoft

Remarque: Avec le recul, cette réponse était rapide et confuse et pourrait ne pas fonctionner dans toutes les situations. Pour avoir une solution fiable, voir Réponse de Tim Down (copier-coller ici car cette réponse est toujours en train d'être vue et augmentée):

Vous ne pouvez pas le faire de manière fiable avec l'événement keyup. Si tu veux savoir Quelque chose à propos du caractère qui a été tapé, vous devez utiliser le touche presse événement à la place.

L'exemple suivant fonctionnera tout le temps dans la plupart des navigateurs, à l'exception de il y a certains cas Edge que vous devriez être au courant. Pour ce qui est dedans À mon avis, le guide définitif à ce sujet, voir http://unixpapa.com/js/key.html .

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Charcter was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyup et keydown vous donnent des informations sur la clé physique qui était pressé. Sur les claviers américains/britanniques standard dans leurs dispositions standard, il Il semble y avoir une corrélation entre la propriété keyCode de ces événements et le caractère qu'ils représentent. Cependant, ce n'est pas fiable: différentes configurations de clavier auront des mappages différents.

Ce qui suit était la réponse d'origine, mais n'est pas correct et peut ne pas fonctionner de manière fiable dans toutes les situations.

Pour faire correspondre le code d'activation avec un caractère Word (par exemple, a correspondrait. space ne le ferait pas)

$("input").keyup(function(event)
{ 
    var c= String.fromCharCode(event.keyCode);
    var isWordcharacter = c.match(/\w/);
});

Ok, c'était une réponse rapide. La démarche est la même, mais méfiez-vous des problèmes de codes-clés, voir cet article article en mode quirks . </ Strike>

45
Nivas

Vous ne pouvez pas le faire de manière fiable avec l'événement keyup. Si vous voulez en savoir plus sur le caractère saisi, vous devez utiliser plutôt l'événement keypress.

L'exemple suivant fonctionnera tout le temps dans la plupart des navigateurs, mais vous devez connaître certains cas Edge. Pour ce qui est à mon avis le guide définitif à ce sujet, voir http://unixpapa.com/js/key.html .

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Charcter was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyup et keydown vous donnent des informations sur la touche physique sur laquelle vous avez appuyé. Sur les claviers US/UK standard dans leurs dispositions standard, il semble qu'il existe une corrélation entre la propriété keyCode de ces événements et le caractère qu'ils représentent. Toutefois, cela n’est pas fiable: différentes configurations de clavier auront des mappages différents.

97
Tim Down

Cela m'a aidé:

$("#input").keyup(function(event) {
        //use keyup instead keypress because:
        //- keypress will not work on backspace and delete
        //- keypress is called before the character is added to the textfield (at least in google chrome) 
        var searchText = $.trim($("#input").val());

        var c= String.fromCharCode(event.keyCode);
        var isWordCharacter = c.match(/\w/);
        var isBackspaceOrDelete = (event.keyCode == 8 || event.keyCode == 46);

        // trigger only on Word characters, backspace or delete and an entry size of at least 3 characters
        if((isWordCharacter || isBackspaceOrDelete) && searchText.length > 2)
        { ...
11
TARL

Je ne suis pas totalement satisfait des autres réponses données. Ils ont tous une sorte de défaut à eux.

Utiliser keyPress avec event.which n'est pas fiable car vous ne pouvez pas capturer un retour arrière ou une suppression (comme mentionné par Tarl) . Utiliser keyDown (comme dans les réponses de Niva et Tarl) est un peu mieux, mais la solution est défectueuse d'utiliser event.keyCode avec String.fromCharCode() (keyCode et charCode ne sont pas identiques!).

Cependant, ce que nous avons avec l'événement keydown ou keyup est la touche réelle qui a été enfoncée (event.key) . Pour autant que je sache, tout key d'une longueur de 1 correspond à un caractère (chiffre ou lettre) indépendamment de quelle langue clavier vous utilisez. S'il vous plaît corrigez-moi si ce n'est pas vrai!

Ensuite, il y a cette très longue réponse de asdf. Cela pourrait fonctionner parfaitement, mais cela semble excessif.

Donc, voici une solution simple qui va attraper tous les caractères, effacer et supprimer. (Remarque: soit keyup ou keydown fonctionnera ici, mais keypress ne fonctionnera pas)

$("input").keydown(function(e) {

    var isWordCharacter = event.key.length === 1;
    var isBackspaceOrDelete = (event.keyCode === 8 || event.keyCode === 46);

    if (isWordCharacter || isBackspaceOrDelete) {

    }
});
9
HankScorpio

Si vous devez uniquement exclure les clés enter, escape et spacebar, vous pouvez procéder comme suit:

$("#text1").keyup(function(event) {
if (event.keyCode != '13' && event.keyCode != '27' && event.keyCode != '32') {
     alert('test');
   }
});

Voir les actions ici.

Vous pouvez vous référer à la liste complète de keycode ici pour une modification ultérieure.

4
bla

Je voulais faire exactement cela, et j'ai pensé à une solution impliquant à la fois le keyup et le appuyez sur une touche des événements.

(Je ne l'ai pas testé dans tous les navigateurs, mais j'ai utilisé les informations compilées à l'adresse http://unixpapa.com/js/key.html )

Edit: le réécrit comme un plugin jQuery. 

(function($) {
    $.fn.normalkeypress = function(onNormal, onSpecial) {
        this.bind('keydown keypress keyup', (function() {
            var keyDown = {}, // keep track of which buttons have been pressed
                lastKeyDown;
            return function(event) {
                if (event.type == 'keydown') {
                    keyDown[lastKeyDown = event.keyCode] = false;
                    return;
                }
                if (event.type == 'keypress') {
                    keyDown[lastKeyDown] = event; // this keydown also triggered a keypress
                    return;
                }

                // 'keyup' event
                var keyPress = keyDown[event.keyCode];
                if ( keyPress &&
                     ( ( ( keyPress.which >= 32 // not a control character
                           //|| keyPress.which == 8  || // \b
                           //|| keyPress.which == 9  || // \t
                           //|| keyPress.which == 10 || // \n
                           //|| keyPress.which == 13    // \r
                           ) &&
                         !( keyPress.which >= 63232 && keyPress.which <= 63247 ) && // not special character in WebKit < 525
                         !( keyPress.which == 63273 )                            && //
                         !( keyPress.which >= 63275 && keyPress.which <= 63277 ) && //
                         !( keyPress.which === event.keyCode && // not End / Home / Insert / Delete (i.e. in Opera < 10.50)
                            ( keyPress.which == 35  || // End
                              keyPress.which == 36  || // Home
                              keyPress.which == 45  || // Insert
                              keyPress.which == 46  || // Delete
                              keyPress.which == 144    // Num Lock
                              )
                            )
                         ) ||
                       keyPress.which === undefined // normal character in IE < 9.0
                       ) &&
                     keyPress.charCode !== 0 // not special character in Konqueror 4.3
                     ) {

                    // Normal character
                    if (onNormal) onNormal.call(this, keyPress, event);
                } else {
                    // Special character
                    if (onSpecial) onSpecial.call(this, event);
                }
                delete keyDown[event.keyCode];
            };
        })());
    };
})(jQuery);
4
asdf

Je n'ai jamais aimé la validation du code de clé. Mon approche était de voir si l'entrée avait du texte (n'importe quel caractère), confirmant que l'utilisateur saisissait du texte et aucun autre caractère

$('#input').on('keyup', function() {
    var words = $(this).val();
    // if input is empty, remove the Word count data and return
    if(!words.length) {
        $(this).removeData('wcount');
        return true;
    }
    // if Word count data equals the count of the input, return
    if(typeof $(this).data('wcount') !== "undefined" && ($(this).data('wcount') == words.length)){
        return true;
    }
    // update or initialize the Word count data
    $(this).data('wcount', words.length);
    console.log('user tiped ' + words);
    // do you stuff...
});
<html lang="en">
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
  <input type="text" name="input" id="input">
  </body>
</html>

0
lordlouis