'Is there a way to detect keypress/enter in search event?

I am looking for a way to differentiate between pressing Enter in a input[type="search"] event (search-event), and clearing the query by clicking X.

I have tried looking for variables in e and e.target

The only thing I can think of is:

search.addEventListener("search", (e) => {
 e.addEventListener("keypress", event => {
   if (event.key === "Enter") {
     ....
   }
 });

});

But I don't like this at all, and there is no way to specifically detect the clicking X. Normally I use handler functions, so the code readability will suffer from this event nesting I think.

Is there a built in way or better way to achieve this? All help & thoughts are welcome!

javascripthtmlsearchdom-events


Solution 1:[1]

From my experience, there is no way to differentiate between these two, unless you use specific function with onClick event handler.
This can also help. How do you detect the clearing of a "search" HTML5 input?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kristesiashvili

Related Questions