• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wykonanie funkcji po naciśnięciu entera

0 głosów
105 wizyt
pytanie zadane 13 października 2020 w JavaScript przez Layoutowiec Mądrala (5,470 p.)

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

1 odpowiedź

+1 głos
odpowiedź 13 października 2020 przez ScriptyChris Mędrzec (180,980 p.)
wybrane 14 października 2020 przez Layoutowiec
 
Najlepsza

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().

komentarz 13 października 2020 przez Layoutowiec Mądrala (5,470 p.)

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="" ?

komentarz 13 października 2020 przez ScriptyChris Mędrzec (180,980 p.)

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ć.

komentarz 13 października 2020 przez Layoutowiec Mądrala (5,470 p.)
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
komentarz 13 października 2020 przez ScriptyChris Mędrzec (180,980 p.)

Ż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') ;
}

 

Podobne pytania

0 głosów
1 odpowiedź 542 wizyt
pytanie zadane 28 listopada 2016 w JavaScript przez kobor Początkujący (270 p.)
0 głosów
2 odpowiedzi 1,186 wizyt
0 głosów
5 odpowiedzi 136 wizyt
pytanie zadane 9 lutego 2016 w C i C++ przez marekl91 Początkujący (380 p.)

88,330 zapytań

136,922 odpowiedzi

305,590 komentarzy

58,601 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...