Comment détecter si la touche enfoncée produira un caractère dans une zone de texte?

La solution possible que je peux trouver est de vérifier la longueur de la clé dans l'événement.

Par exemple:-

<input type="text" id="testId" onkeyup="keyChecking(event)" />

<script type="text/javascript">
function keyChecking(event) {

    if (event.key.length == 1) {
        alert("key produced character " + event.key);
    } else {
        alert("Key DOES NOT produce character");

        const alphabets = "AZaz09";
        const key = event.key;
        var notEvenASymbol = false;

        for (let i = 0; i < key.length; i++) {
            var charCode = key.charCodeAt(i);
            if ((charCode >= alphabets.charCodeAt(0) && charCode <= alphabets.charCodeAt(1)) ||
                (charCode >= alphabets.charCodeAt(2) && charCode <= alphabets.charCodeAt(3)) ||
                (charCode >= alphabets.charCodeAt(4) && charCode <= alphabets.charCodeAt(5))
            ) {
                notEvenASymbol = true;
                console.log(charCode);
                break;
            }
        }

        if (notEvenASymbol) {
            alert("Key DOES NOT produce even a symbol");
        }
        console.log(event.key);

    }
}    
</script>

Donc, si vous appuyez sur des caractères / Symboles, le event.key contiendra ce caractère et sa longueur sera 1. Si vous appuyez sur la touche de caractère V, puis le event.key aura la valeur V, mais si vous appuyez sur la touche enter puis il contiendra la valeur de Entrer, si vous appuyez sur shift puis Shift et ainsi de suite. Par conséquent, si une clé ne produit pas de caractère, sa longueur sera plus grand que 1.

Mise à Jour

Certaines touches spéciales du clavier produisent un symbole et sa longueur peut être supérieure à 1, alors j'ai modifié le code pour qu'il puisse alerter même si ce n'est pas un symbole. Par exemple: - sa longueur est 2. Certains claviers mobiles ont des touches de raccourci pour de tels symboles.

Une touche non caractère / symbole dans le clavier sera toujours une combinaison d'alphabets, de caractères numériques ou des deux, par exemple: - F2, Maj .

Merci @ Vicky Chijwani pour attirer l'attention sur ce scénario.

OK, je pense que je l'ai. La solution est un peu hackish, mais fonctionne vraiment bien.

Sur keydown, faites un setTimeout pour 1 milliseconde, qui appelle une fonction pour vérifier / modifier la longueur de votre boîte de saisie.

Http://jsfiddle.net/rygar/e2wQM/

Cela semble très bien fonctionner, surtout dans quelques endroits où votre version ne fonctionne pas (par exemple backspace, CTRL+V, ou en sélectionnant tout un tas de texte et en appuyant sur delete)

Edit: même setTimeout avec un 0ms le retard semble fonctionner!

Vous devez utiliser la propriété keyEventArgs.Clé dans la fonction keydown, cela renverra la valeur numérique qui dépendra du système.

Voici un lien qui contient les différents codes clés pour les différents navigateurs et systèmes d'exploitation:

Http://www.quirksmode.org/js/keys.html

Voici une solution beaucoup plus simple qui a bien fonctionné pour moi:

if(String.fromCharCode(event.keyCode).match(/(\w|\s)/g)) {
  //pressed key is a char
} else {
  //pressed key is a non-char
  //e.g. 'esc', 'backspace', 'up arrow'
}

Cela ne nécessite pas de sonder un élément DOM (ce qui ajouterait de la latence et de la laideur).

Ce n'est peut-être pas la méthode que vous recherchez, mais vous pouvez simplement vérifier la valeur de this.value.length dans votre fonction keydown. La valeur de retour est la longueur du texte dans le champ de saisie avant l'ajout du nouveau caractère. Donc, si vous vérifiez à nouveau la longueur dans la fonction keyup, elle sera plus grande si l'utilisateur appuie sur un caractère, mais la même chose si l'utilisateur appuie sur la touche Maj.

Je suppose que vous configurez un compteur sur la longueur d'un champ de saisie, auquel cas vous n'avez pas besoin d'être aussi chic, vous pouvez simplement continuer à assigner la longueur du champ à une variable, et quand l'utilisateur arrive à votre longueur maximale, il suffit d'appuyer sur delete ou backspace comme ceci:

$("input:text").keypress(function() {
var current = $(this).val().length;
if (current >= 130) {
if (e.which != 0 && e.which != 8) {
e.preventDefault();
}
}
}

Vous pouvez également utiliser la variable current pour afficher le compteur, ou faire maxlength - current pour faire un compte à rebours du nombre de caractères restants

Votre objectif est de garder la zone de texte plus grande que le texte qui y a été entré.

J'accomplirais cela en prévoyant d'avoir de la place pour deux caractères supplémentaires (Pas un) dans la zone de texte. Alors:

// pseudo-code.... 
old_len = textbox.value.length
keyUp function() {
  var new_len = textbox.value.length
  if (new_len != old_len) {
    old_len = new_len
    textbox.style.size = new_len + 2 // pseudo code.
  }
}

L'avantage est que vous n'avez pas besoin de descendre dans le monde occulte des codes de touche.