Replacement for deprecated `keypress` DOM event

Question

According to MDN article keypress event is deprecated:

But I can't find any information elsewhere on whether we should use this event in a new projects. If we shouldn't, what is the replacement?

Could somebody give an insight?

Answer 1

Since the event is deprecated, you should avoid using it in new code, and plan on removing it from old code. The W3C specification says this about deprecated features:

Features marked as deprecated are included in the specification as reference to older implementations or specifications, but are OPTIONAL and discouraged. Only features which have existing or in-progress replacements MUST be deprecated in this specification. Implementations which do not already include support for the feature MAY implement deprecated features for reasons of backwards compatibility with existing content, but content authors creating content SHOULD NOT use deprecated features, unless there is no other way to solve a use case. Other specifications which reference this specification SHOULD NOT use deprecated features, but SHOULD point instead to the replacements of which the feature is deprecated in favor. Features marked as deprecated in this specification are expected to be dropped from future specifications.

The specification of the keypress event says:

Warning The keypress event type is defined in this specification for reference and completeness, but this specification deprecates the use of this event type. When in editing contexts, authors can subscribe to the beforeinput event instead.

You can also use the keydown and/or keyup events. See What's the difference between keyup, keydown, keypress and input events?

However, since beforeinput doesn't yet have much support, if none of these other events fits your use case you'll have to continue to use keypress for now (that's the "unless there is no other way to solve a use case" exception in the spec).

Answer 2

 const handleKeyDown = (e: any) => {
  if (e.code === "Enter") {
  triggerBusqueda(e.target.value);
  }
};

onKeyDown={handleKeyDown}

You can use this code, it works very well.

Answer 3

onKeyPress is deprecated.

It has been replaced by onKeyDown

onKeyPress={(e) => {
  if (e.key === 'Enter') {
    createInvitationF()
  }
}}

is replaced by

onKeyDown={(e) => {
  if (e.key === 'Enter') {
    createInvitationF()
  }
}}

Answer 4

Not super hard to work around unless (shame on you) you or something you use has been clobbering event bubbling indiscriminately at every opportunity.

Simple but powerful utility like this is exactly why you should only do that for isolated node leaves of your HTML.

In those cases where you did have to prevent keydown bubbling you could simply wrap the following in a function that takes an argument in place of document.body and simply apply at the point where bubbling is stopped if you still want 'keypress2' events available to that 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);});