GlobalEventHandlers.onkeypress

Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La propriété onkeypress, rattachée au mixin GlobalEventHandlers, est un gestionnaire d'évènements (en-US) qui permet de traiter les évènements keypress.

L'évènement keypress devrait être déclenché lorsqu'on appuie sur une touche du clavier. Toutefois, en pratique, les navigateurs ne déclenchent pas d'évènements keypress pour certaines touches.

Attention : Le gestionnaire d'évènements onkeypress est déprécié, il faut utiliser onkeydown à la place.

Syntaxe

cible.onkeypress = refFonction;

Valeur

refFonction est un nom de fonction ou une expression de fonction. La fonction reçoit un objet KeyboardEvent comme unique argument.

Exemples

Exemple simple

Cet exemple affiche la valeur de KeyboardEvent.code à chaque fois qu'on appuie sur une touche à l'intérieur de l'élément <input>.

HTML

<input>
<p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.onkeypress = logKey;

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

Résultat

Filtrer des touches à l'aide d'une expression rationnelle

Dans cet exemple, on filtre les caractères saisis dans le champ du formulaire à l'aide d'une expression rationnelle.

HTML

<label>Veuillez ne saisir que des chiffres :
  <input>
</label>

JavaScript

function numbersOnly(event) {
  return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));
}

const input = document.querySelector('input');
input.onkeypress = numbersOnly;

// On empêche de coller (le contenu collé pourrait contenir
// des caractères qui ne sont pas des chiffres)
input.onpaste = event => false;

Résultat

Capturer la saisie d'un mot-clé secret

La fonction JavaScript qui suit fera une action lorsqu'on saisira le mot "exit" à n'importe quel endroit de la page.

(function () {
  const sSecret = "exit";
  let nOffset = 0;

  document.onkeypress = function(oPEvt) {
    let oEvent = oPEvt || window.event,
        nChr = oEvent.charCode,
        sNodeType = oEvent.target.nodeName.toUpperCase();

    if (nChr === 0 ||
        oEvent.target.contentEditable.toUpperCase() === "TRUE" ||
        sNodeType === "TEXTAREA" ||
        sNodeType === "INPUT" && oEvent.target.type.toUpperCase() === "TEXT") {
      return true;
    }

    if (nChr !== sSecret.charCodeAt(nOffset)) {
      nOffset = nChr === sSecret.charCodeAt(0) ? 1 : 0;
    } else if (nOffset < sSecret.length - 1) {
      nOffset++;
    } else {
      nOffset = 0;
      /* Faire quelque chose ici… */
      console.log("et voilà !");
      location.assign("https://developer.mozilla.org/");
    }

    return true;
  };
})();

Note : Un framework pour effectuer de telles captures, plus complet, est disponible sur GitHub.

Spécifications

Specification
HTML Standard
# handler-onkeypress

Compatibilité des navigateurs

BCD tables only load in the browser

Notes de compatibilité

  • L'évènement keypress n'est plus déclenché pour les touches non-imprimables (en-US) (voir le bug 968056 pour l'implémentation de ce comportement dans Firefox 65), à l'exception de la touche Entrée, et des combinaisons de touches Shift+Entrée et Ctrl+Entrée (à des fins de compatibilité entre navigateurs).

Voir aussi