web-dev-qa-db-fra.com

Remplacement d'un événement DOM obsolète `keypress`

Selon article MDNkeypress événement est déconseillé:

enter image description here

Mais je ne trouve aucune information ailleurs sur la question de savoir si nous devrions utiliser cet événement dans un nouveau projet. Si nous ne devrions pas, quel est le remplacement?

Quelqu'un pourrait-il donner un aperçu?

javascripthtmleventsdomdom-events
10
Alexander Abakumov

Étant donné que l'événement est obsolète, vous devez éviter de l'utiliser dans le nouveau code et prévoir de le supprimer de l'ancien code. spécification W3C dit ceci à propos des fonctionnalités obsolètes:

Les fonctionnalités marquées comme obsolètes sont incluses dans la spécification comme référence à des implémentations ou spécifications plus anciennes, mais sont FACULTATIVES et déconseillées. Seules les fonctionnalités qui ont des remplacements existants ou en cours DOIVENT être dépréciées dans cette spécification. Les implémentations qui n'incluent pas déjà la prise en charge de la fonctionnalité PEUVENT implémenter des fonctionnalités obsolètes pour des raisons de rétrocompatibilité avec le contenu existant, mais les auteurs de contenu créant du contenu NE DEVRAIENT PAS utiliser les fonctionnalités obsolètes, sauf s'il n'y a pas d'autre moyen de résoudre un cas d'utilisation . Les autres spécifications qui font référence à cette spécification NE DEVRAIENT PAS utiliser des fonctionnalités obsolètes, mais DEVRAIENT plutôt pointer vers les remplacements dont la fonctionnalité est obsolète en faveur. Les fonctionnalités marquées comme obsolètes dans cette spécification devraient être supprimées des futures spécifications.

La spécification de keypress event dit:

Avertissement Le type d'événement de pression de touche est défini dans cette spécification pour référence et exhaustivité, mais cette spécification déconseille l'utilisation de ce type d'événement. Dans les contextes d'édition, les auteurs peuvent à la place s'abonner à l'événement beforeinput .

Vous pouvez également utiliser les événements keydown et/ou keyup. Voir Quelle est la différence entre les événements keyup, keydown, keypress et input?

Cependant, comme beforeinput n'a pas encore beaucoup de support, si aucun de ces autres événements ne correspond à votre cas d'utilisation, vous devrez continuer à utiliser keypress pour l'instant (c'est le "sauf s'il y a pas d'autre moyen de résoudre un cas d'utilisation "exception dans la spécification).

5
Barmar

Pas super difficile à contourner sauf si (honte à vous) vous ou quelque chose que vous utilisez a été un événement qui a frappé sans discernement à chaque occasion.

Un utilitaire simple mais puissant comme celui-ci est exactement la raison pour laquelle vous ne devriez le faire que pour les feuilles de nœuds isolés de votre HTML.

Dans les cas où vous deviez empêcher le bullage des touches, vous pouvez simplement envelopper ce qui suit dans une fonction qui prend un argument à la place de document.body et simplement appliquer au point où le bullage est arrêté si vous voulez toujours que les événements 'keypress2' soient disponibles pour que HMTL.

const keyBlacklist = [
    'Shift',
    'Alt',
    'Control',
    'Meta'
];

document.body.addEventListener('keydown',(e)=>{
    if(keyBlacklist.indexOf(e.key) === -1){
        const newKeyPress = new CustomEvent('keypress2',{detail:e});
        e.target.dispatchEvent(newKeyPress);
    }
});

document.body.addEventListener('keypress2',e=>{console.log(e.detail);});
0
Erik Reppen