Wykonanie funkcji po naciśnięciu entera

Question

Witam!

Poszukuję kodu, dzięki któremu po naciśnięciu entera(przy wpisywaniu tekstu do inputa) wykona się dana funckcja.

Znalazłem jedynie ten kod:

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   btn.click();
  }
});

Jednak z tego co widzę jest on już nieaktualny...

A więc moje pytanie brzmi jak powinien wyglądać kod w aktualnych standardach?

Miłego wieczoru, dzięki za poświęcony czas

Answer 1

Property keyCode jest zdeprecjonowane. Lepiej jest używać code.

Druga rzecz. Uważaj na metodę .click(), gdy do elementu na którym ją wołasz masz podpięte listenery, które korzystają z promisów lub innych interfejsów korzystających z kolejki micro tasków (jak np. MutationObserver), ponieważ ta metoda odpala listenery synchronicznie (w przeciwieństwie do "ręcznego" klikania), co skutkuje trochę inną kolejnością wykonania callbacków. Demo - kliknięcie w przycisk pokaże w konsoli inną kolejność wywołania callbacków niż synchroniczne użycie metody .click().

Comments

W dokumentacji jest ten kod:

window.addEventListener("keydown", function(event) {
  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
            event.code + "'";
  let el = document.createElement("span");
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
}, true);

 Więc jeśli chciałbym wykonać jakąś funkcję to podejrzewam, że trzeba będzie dorzucić tutaj coś w tym stylu: 

const checkKey = e.keyCode 
if(checkKey == 13) { 
console.log('enter') 
}

Tylko nie do końca jestem pewien jak to poustawiać. A co do metody .click() to lepiej będzie w takim przypadku zastoswać w html onclick="" ?

---

W dokumentacji jest ten kod:

Umieść proszę ten kod w bloczku.

co do metody .click() to lepiej będzie w takim przypadku zastoswać w html onclick="" ?

HTML-owy atrybut onclick (podobnie jak event listenery) służy do wykonania akcji dopiero wtedy, gdy użytkownik kliknie w ten element lub gdy click event będzie zdispatchowany lub gdy wywołasz metodę click() na tym elemencie. Jeśli chcesz programowalnie w coś kliknąć, to użyj metod dispatchEvent(), albo click(); ewentualnie bezpośrednio wywołaj funkcje, które masz podpięte w formie handlerów/listenerów na zdarzenie kliknięcia na tym elemencie - to już zależy co to kliknięcie ma robić.

---

Dodałem kod w bloczek tylko przy edycji, bo z jakiegoś powodu nie mogłem zrobić tego podczas pisania komentarza

Ok, poczytam na ten temat

---

Żeby wykryć klawisz "enter" skorzystaj z property key i ewentualnego fallbacka do keyCode (jeśli wspierasz stare przeglądarki, w których nie ma obsługi key ani code):

const { key, keyCode } = event;

if (key === 'Enter' || keyCode === 13) {
  console.log('enter') ;
}