Symulowanie kliknięcia klawisza w JS

Question

Witam,

piszę skrypt do strony i natrafiłem na problem. Muszę zasymulować kliknięcie przycisku na klawiaturze. Powinna się wtedy wykonać operacja, która wykonałaby się przez normalne kliknięcie tj.: jeśli był zaznaczony input i JS "kliknie" literę s to w inpucie pojawi się s, jeśli na stronie jest jakaś funkcja przypisana pod klawisz 'E' to jeśli JS "kliknie" E to wykona się ta funkcja itd...

Szukałem rozwiązań, jednak w większości są to poradniki jak rozpoznać, który klawisz ZOSTAŁ KLIKNIĘTY, a nie jak KLIKNĄĆ ten przycisk. Podejrzewam, że jest jakieś zdarzenie dotyczące wciśnięcia klawisza, ale jeśli to prawda to nie wiem jak wywołać zdarzenie.

Z góry dzięki,

Pozdrawiam.

Comments

https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically ?

Answer 1

Tego nie za bardzo da się zrobić przy pomocy kodu JS. Jeśli listenery powinny się odpalić, tak niekoniecznie odpali się natywne zachowanie przeglądarki (czyli wstawienie czegokolwiek do inputa) – a to z powodu tzw. zaufanych zdarzeń. I tego nie da się za bardzo obejść. Jedyne, co przychodzi mi do głowy, to wykorzystanie czegoś typu Puppeteer. Nie wiem też, czy rozszerzenie do przeglądarki nie mogłoby tego zrobić.

Answer 2

Symulacja klawisza za pomocą KeyboardEvent:

// Tworzenie zdarzenia keydown dla klawisza "S"
const event = new KeyboardEvent("keydown", {
    key: "s", // Wartość klawisza
    code: "KeyS", // Kod klawisza
    keyCode: 83, // Legacy: kod ASCII dla klawisza S
    charCode: 83,
    bubbles: true, // Umożliwia propagację zdarzenia
    cancelable: true // Pozwala na anulowanie zdarzenia
});

// Wywołanie zdarzenia na elemencie input
const inputElement = document.querySelector("input");
inputElement.dispatchEvent(event);

// Jeśli chcesz wysłać zdarzenie globalnie, możesz je wywołać na `document`
document.dispatchEvent(event);

 

1. KeyboardEvent:
   1. Tworzy zdarzenie klawiatury z odpowiednimi opcjami.
   2. Możesz przekazać klucz (key), kod (code) oraz inne szczegóły, aby odwzorować faktyczne wciśnięcie klawisza.
2. Propagacja zdarzenia:
   1. bubbles: true oznacza, że zdarzenie będzie propagować się w górę drzewa DOM.
3. Element docelowy:
   1. Upewnij się, że zdarzenie jest wywoływane na właściwym elemencie. Na przykład, jeśli chcesz wprowadzić literę do pola tekstowego, zdarzenie musi być wywołane na tym polu.