Czy można symulować programowo zdarzenia naciśnięcia klawisza?

380

Czy można JavaScript symulować kluczowe zdarzenia naciśnięcia klawisza?

dębnik
źródło
2
Czy możesz wyjaśnić „symulować”? Czy Twoim celem jest przetestowanie witryny, czy też wprowadzenie funkcji onclick, onmousedown itp. Danego łącza?
Paulo

Odpowiedzi:

180

Wersja nie-jquery, która działa zarówno w pakiecie webkit, jak i gecko:

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
  "keydown", // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  40,        // keyCode: unsigned long - the virtual key code, else 0
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);
Philip Nuzhnyy
źródło
8
Philip, wygląda na to, że potrzebuję kodu, ale muszę wysłać zdarzenie naciśnięcia klawisza do pola tekstowego. Próbowałem zmodyfikować kod, aby wysłać go do obszaru tekstowego, ale wydaje się, że nie działa, przynajmniej w Chrome, jakiś pomysł, co może być nie tak? oto jsfiddle, który zrobiłem w celu zademonstrowania: jsfiddle.net/szmJu
user280109
4
Okazuje się, że w Chromium występuje błąd związany z wysyłaniem KeyboardEvent. Sprawdź ten wątek po więcej szczegółów: stackoverflow.com/questions/10455626/... .
Philip Nuzhnyy,
26
keyCodewynosi zawsze 0 i nie mogę go zmienić.
Ata Iravani
9
Wygląda na to, że w Chromium występuje błąd, który powoduje, że event.whichzawsze tak jest 0podczas używania document.createEvent("KeyboardEvent"). @lluft udostępnił szczegóły i obejście, które dla mnie zadziałało, w tym komentarzu do innego wątku. Zasadniczo musisz użyć, document.createEvent('Event')aby utworzyć ogólne zdarzenie, a następnie ustawić typ keydowni nadać keyCodewłaściwość równą kodowi znaków klucza.
A-Diddy
8
Wygląda na to, że ta funkcja została już usunięta. Jednak MDN już od dłuższego czasu uważa to za przestarzałe.
Tacticus,
72

Jeśli możesz używać jQuery 1.3.1:

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

$(function() {
  $('body').keypress(function(e) {
    alert(e.which);
  });

  simulateKeyPress("e");
});
alex2k8
źródło
Cześć, co miałem na myśli to: 1. Zarejestruj kluczowe wydarzenie (litera e wykonuje JS) 2. Z innej metody chcę programowo nacisnąć literę e)
tan
9
Niestety nie działa poprawnie w Chrome. jQuery tworzy Event, ale bez ważnych atrybutów - które, charCode, keyCode.
hamczu
4
@tan To nie jest możliwe. Zobacz moją odpowiedź na uzasadnienie.
Lorenz Lo Sauer
51

To, co możesz zrobić, to programowo uruchomić kluczowe odbiorniki , uruchamiając kluczowe zdarzenia . Sensowne jest zezwolenie na to z piaskownicy z perspektywy bezpieczeństwa. Korzystając z tej umiejętności, możesz następnie zastosować typowy wzorzec obserwatora . Możesz nazwać tę metodę „symulacją”.

Poniżej znajduje się przykład, jak to osiągnąć w standardzie DOM W3C wraz z jQuery:

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.querySelector('input[type=submit][name=btnK]'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // preventDefault was called and the event cancelled
  } else {
    // insert your event-logic here...
  }
}

Ten przykład został zaadaptowany z: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

W jQuery:

jQuery('input[type=submit][name=btnK]')
  .trigger({
    type: 'keypress',
    which: character.charCodeAt(0 /*the key to trigger*/)      
   });

Ale od niedawna nie ma sposobu [DOM], aby faktycznie uruchomić kluczowe zdarzenia opuszczające piaskownicę przeglądarki. Wszyscy główni dostawcy przeglądarek będą przestrzegać tej koncepcji bezpieczeństwa.

Jeśli chodzi o wtyczki, takie jak Adobe Flash - które są oparte na NPAPI - i pozwalają na ominięcie piaskownicy: są one wycofywane ; Firefox .

Szczegółowe wyjaśnienie:

Nie możesz i nie możesz ze względów bezpieczeństwa (jak już wskazał Pekka). Zawsze będzie wymagana interakcja użytkownika pomiędzy. Dodatkowo wyobraź sobie, że producenci przeglądarek mogą zostać pozwani przez użytkowników, ponieważ różne programowe zdarzenia na klawiaturze doprowadzą do ataków fałszujących.

Zobacz ten post, aby znaleźć alternatywy i więcej szczegółów. Zawsze istnieje funkcja flashowania i kopiowania. Oto elegancki przykład . Jednocześnie jest to świadectwo, dlaczego sieć odchodzi od dostawców wtyczek.

Podobne podejście do bezpieczeństwa stosuje się w przypadku akceptowalnej zasady CORS w celu programowego dostępu do zdalnej treści.

Odpowiedź brzmi:
w normalnych okolicznościach nie ma możliwości programowego uruchomienia klawiszy wejściowych w środowisku przeglądarki w trybie piaskownicy .

Konkluzja: Nie mówię, że nie będzie to możliwe w przyszłości, przy specjalnych trybach przeglądarki i / lub przywilejach do końcowego celu gry lub podobnych doświadczeń użytkownika. Jednak przed wejściem w takie tryby użytkownik zostanie zapytany o uprawnienia i ryzyko, podobne do modelu pełnoekranowego interfejsu API .

Przydatne: w kontekście KeyCodes to narzędzie i mapowanie kodu klucza przyda się.

Ujawnienie: Odpowiedź opiera się na odpowiedzi tutaj .

Lorenz Lo Sauer
źródło
Tak więc z JavaScript KeyboardEvent API ( developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent ) możesz symulować kluczowe zdarzenia, na przykład powiedzieć, że klawisz jest wciśnięty, ale nie można uzyskać efektu naciśnięcia klawisza , jak pisanie znaków „a”, „b”, „c”? Jeśli to możliwe, pisanie tych podstawowych znaków nie stanowi problemu bezpieczeństwa, ale rozumiem, że specjalny klucz, taki jak „F12” lub kombinacja, taka jak „Alt + F4”, powinien być zabroniony.
baptx
1
To właśnie otrzymuję, kiedy uruchamiam twoją jQuery w Chrome: Uncaught ReferenceError: postać nie jest zdefiniowana
Jayden Lawson
29

Możesz wywoływać zdarzenia klawiatury dla takiego elementu

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
aljgom
źródło
12
Myślę, że ta odpowiedź powinna wspomnieć o tym, że wywołanie w zdarzeniu js nie aktualizuje treści wejściowej.
Kirill Reznikov
5
Najnowszy Firefox nie jest nowoczesny?
emix
Wydaje się, że keypressjest amortyzowana, używając keydownzamiast tego -> developer.mozilla.org/en-US/docs/Web/Events/keypress
JMT2080AD
Działa idealnie dla mnie z Chrome Embedded, tak jak potrzebuję.
Paulo França Lacerda
25

Możesz użyć dispatchEvent():

function simulateKeyPress() {
  var evt = document.createEvent("KeyboardEvent");
  evt.initKeyboardEvent("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, "e".charCodeAt(0))
  var body = document.body;
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

Nie testowałem tego, ale jest on dostosowany z kodu w dokumentacji dispatchEvent () . Prawdopodobnie będziesz chciał to przeczytać, a także dokumenty dla createEvent () i initKeyEvent ().

Plutor
źródło
16
Uwaga: Ta funkcja jest obsługiwana tylko przez przeglądarki Gecko.
lhunath
3
Gecko i inne przeglądarki nie zgadzały się co do tego, czy używać initKeyEventczy initKeyboardEvent(). Oba są przestarzałe na korzyść konstruktora KeyboardEvent () .
jkmartindale
21

Możesz tworzyć i wywoływać zdarzenia klawiatury, a one wyzwalają odpowiednie zarejestrowane procedury obsługi zdarzeń, jednak nie generują żadnego tekstu , jeśli zostaną wysłane na przykład do elementu wejściowego.

Aby w pełni zasymulować wprowadzanie tekstu, musisz utworzyć sekwencję zdarzeń na klawiaturze oraz jawnie ustawić tekst elementu wejściowego. Kolejność zdarzeń zależy od tego, jak dokładnie chcesz symulować wprowadzanie tekstu.

Najprostsza forma to:

$('input').val('123');
$('input').change();
Alex Burtsev
źródło
15

W niektórych przypadkach keypresszdarzenie nie może zapewnić wymaganej funkcjonalności. Z dokumentów Mozilli możemy zobaczyć, że ta funkcja jest przestarzała:

Ta funkcja nie jest już zalecana. Chociaż niektóre przeglądarki mogą go nadal obsługiwać, być może zostały już usunięte z odpowiednich standardów internetowych, mogą być w trakcie upuszczania lub mogą być przechowywane wyłącznie w celu zachowania zgodności. Unikaj go i, jeśli to możliwe, aktualizuj istniejący kod; zapoznaj się z tabelą kompatybilności na dole tej strony, aby podjąć decyzję. Pamiętaj, że ta funkcja może przestać działać w dowolnym momencie.

Tak więc, ponieważ keypresszdarzenie jest łączone z dwóch konsekwentnie odpalanych zdarzeń keydowni następujących po nim keyupdla tego samego klucza, wystarczy wygenerować zdarzenia jeden po drugim:

element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
element.dispatchEvent(new KeyboardEvent('keyup',{'key':'Shift'}));
Малъ Скрылевъ
źródło
13

Opierając się na odpowiedzi z alex2k8, oto poprawiona wersja, która działa we wszystkich przeglądarkach obsługiwanych przez jQuery (problemem były brakujące argumenty do jQuery.event.trigger, których łatwo zapomnieć, gdy używasz tej funkcji wewnętrznej).

// jQuery plugin. Called on a jQuery object, not directly.
jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger with arguments (Event, data, elem).
  // That last argument, 'elem', is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(function ($) {
  // Bind event handler
  $('body').keypress(function (e) {
    alert(String.fromCharCode(e.which));
    console.log(e);
  });
  // Simulate the key press
  $('body').simulateKeyPress('x');
});

Możesz nawet popchnąć to dalej i pozwolić nie tylko symulować zdarzenie, ale faktycznie wstawić znak (jeśli jest to element wejściowy), jednak istnieje wiele gotcha w różnych przeglądarkach, gdy próbujesz to zrobić. Lepiej użyj bardziej rozbudowanej wtyczki, takiej jak SendKeys .

Timo Tijhof
źródło
1
SendKeys NIE symuluje naciśnięć klawiszy, po prostu wstrzykuje wartości do elementów docelowych.
Ahmed Masud
2
Nie symuluje naciśnięcia klawisza sprzętowego, po prostu wywołuje funkcję powiązanego naciśnięcia klawisza.
Codebeat
8

Zainteresowanym możesz w rzeczywistości niezawodnie odtwarzać zdarzenia z klawiatury. Aby zmienić tekst w polu wprowadzania (przesuń kursory lub stronę za pomocą znaku wejściowego), musisz ściśle przestrzegać modelu zdarzeń DOM: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Model powinien wykonać:

  • focus (wysyłany do DOM z ustawionym celem)

Następnie dla każdej postaci:

  • keydown (wysyłany w DOM)
  • beforeinput (wysyłane do celu, jeśli jest to obszar tekstowy lub dane wejściowe)
  • naciśnięcie klawisza (wysyłane do DOM)
  • dane wejściowe (wysyłane do celu, jeśli jest to obszar tekstowy lub dane wejściowe)
  • zmiana (wysyłana do celu, jeśli jest to wybór)
  • keyup (wysyłany w DOM)

Następnie opcjonalnie dla większości:

  • rozmycie (wysyłane do DOM z ustawionym celem)

To faktycznie zmienia tekst na stronie za pomocą javascript (bez modyfikowania instrukcji wartości) i odpowiednio uruchamia wszelkie detektory / procedury obsługi javascript. Jeśli zepsujesz sekwencję, javascript nie uruchomi się w odpowiedniej kolejności, tekst w polu wejściowym nie zmieni się, zaznaczenia się nie zmienią lub kursor nie przejdzie do następnej spacji w obszarze tekstowym.

Niestety kod został napisany dla pracodawcy w ramach NDA, więc nie mogę go udostępnić, ale jest to zdecydowanie możliwe, ale musisz odtworzyć cały „stos” wejściowego klucza dla każdego elementu we właściwej kolejności.

Trevor
źródło
8
NDA dla JavaScript? Naprawdę? , w każdym razie dla każdego znaku niepoprawny algorytm, symulując zdarzenie „wejściowe” i tak dodaje tekst bez przechodzenia przez całe naciśnięcie klawisza, zdarzenie kluczowania lub inne zdarzenie. Problem polega na tym, jak obsługiwać wiele zdarzeń naciskania klawiszy itp., Takich jak wielokrotne naciskanie przycisku „a” i oczekiwanie „aaaaaaa”.
Akash Kava,
1
Sztuką jest odpalenie skrótu klawiaturowego, wejście, a następnie uruchomienie klucza. Jeśli chcesz wielu „aaaaaa”, odpalaj zdarzenie wejściowe. i nikomu nie mówię.
Trevor,
4
Wypróbowałem to, ale wydaje się, że nie działa całkowicie: mogę wywoływać zdarzenia dla Enter, Backspace lub klawiszy strzałek, ale nie ze znakami. Na przykład nie mogę wprowadzić tekstu za pomocą tej metody, chociaż ściśle przestrzegam kolejności zdarzeń.
Tacticus
@Tacticus przez przypadek nadal masz próbkę kodu do wyzwalania Enter zgodnie z tą odpowiedzią?
Siavas
1
Próbowałem tego, bez powodzenia.
Mason
8

Od 2019 r. To rozwiązanie działa dla mnie:

document.dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69, // example values.
    code: "KeyE", // put everything you need in this object.
    which: 69,
    shiftKey: false, // you don't need to include values
    ctrlKey: false,  // if you aren't going to use them.
    metaKey: false   // these are here for example's sake.
  })
);

Użyłem tego w mojej przeglądarce, aby obsługiwać urządzenia mobilne z symulowaną klawiaturą.

Wyjaśnienie: ten kod keydownwywołuje pojedyncze zdarzenie, podczas gdy naciśnięcie prawdziwego klawisza wyzwoli jedno keydownzdarzenie (lub kilka z nich, jeśli będzie ono dłużej przechowywane), a następnie jedno keyupzdarzenie po zwolnieniu tego klucza. Jeśli potrzebujesz keyuprównież zdarzeń, możesz również symulować keyupzdarzenia, zmieniając "keydown"na"keyup" we fragmencie kodu.

To również wysyła zdarzenie na całą stronę internetową, stąd document. Jeśli chcesz, aby zdarzenie miało tylko określony element, możesz zastąpić documentżądany element.

haley
źródło
1
To jedyne rozwiązanie, które działało dla mnie w funkcji runJavascript Qt QWebEngine. Dzięki
Maxx
z jakiegoś powodu całkowicie ignorowane przez gry Flash (może Flash ignoruje wszystko, co nie jest Trusted?)
hanshenrik
@hanshenrik - Szczerze mówiąc, jeśli używasz Flasha w 2020 roku, naprawdę musisz ponownie przemyśleć, które narzędzia najlepiej pasują do Twoich celów.
haley
7

To podejście obsługuje przeglądarkę zmieniającą wartość kodu klucza . Źródło

var $textBox = $("#myTextBox");

var press = jQuery.Event("keypress");
press.altGraphKey = false;
press.altKey = false;
press.bubbles = true;
press.cancelBubble = false;
press.cancelable = true;
press.charCode = 13;
press.clipboardData = undefined;
press.ctrlKey = false;
press.currentTarget = $textBox[0];
press.defaultPrevented = false;
press.detail = 0;
press.eventPhase = 2;
press.keyCode = 13;
press.keyIdentifier = "";
press.keyLocation = 0;
press.layerX = 0;
press.layerY = 0;
press.metaKey = false;
press.pageX = 0;
press.pageY = 0;
press.returnValue = true;
press.shiftKey = false;
press.srcElement = $textBox[0];
press.target = $textBox[0];
press.type = "keypress";
press.view = Window;
press.which = 13;

$textBox.trigger(press);
Ata Iravani
źródło
7

wystarczy użyć CustomEvent

Node.prototype.fire=function(type,options){
     var event=new CustomEvent(type);
     for(var p in options){
         event[p]=options[p];
     }
     this.dispatchEvent(event);
}

4 ex chce symulować ctrl + z

window.addEventListener("keyup",function(ev){
     if(ev.ctrlKey && ev.keyCode === 90) console.log(ev); // or do smth
     })

 document.fire("keyup",{ctrlKey:true,keyCode:90,bubbles:true})
bortunac
źródło
Próbuję twojego kodu. Po naciśnięciu klawisza wchodzę do słuchacza, ale document.fire nie działa.
Mark
„(” nie stanowi problemu. Naprawiłem go od razu. Po prostu nie dostaję się do niego po wystrzeleniu dokumentu. BTW, uruchamiam go poprzez kliknięcie ikony.
Mark
Mój kod jest mniej więcej taki: <img src = "settings.svg" height = "22" width = "24" style = "kursor: wskaźnik;" ng-click = "openAdminConsole ()"> W openAdminConsole () Robię document.fire. Czy to nie jest poprawne?
Mark
4

To działało dla mnie i symuluje keyup dla mojej textaera. jeśli chcesz go dla całej strony po prostu umieścić KeySimulation()na <body>tak <body onmousemove="KeySimulation()">lub jeśli nie onmousemovewtedy onmouseoveralbo onloadteż działa.

<script>
function KeySimulation()
{
var e = document.createEvent("KeyboardEvent");
if (e.initKeyboardEvent) {  // Chrome, IE
    e.initKeyboardEvent("keyup", true, true, document.defaultView, "Enter", 0, "", false, "");
} else { // FireFox
    e.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, 13, 0);
}
document.getElementById("MyTextArea").dispatchEvent(e);
}
</script>

<input type="button" onclick="KeySimulation();" value=" Key Simulation " />
<textarea id="MyTextArea" rows="15" cols="30"></textarea>
SeekLoad
źródło
2
Ostrzegamy, że initKeyboardEventjest przestarzałe. ( Źródło )
radiowizualny
4

Jeden raz był wierszowany ze względu na łatwe użycie w kontekście konsoli. Ale prawdopodobnie nadal przydatne.

    var pressthiskey = "q"/* <-- q for example */;
    var e = new Event("keydown");
    e.key = pressthiskey;
    e.keyCode = e.key.charCodeAt(0);
    e.which = e.keyCode;
    e.altKey = false;
    e.ctrlKey = true;
    e.shiftKey = false;
    e.metaKey = false;
    e.bubbles = true;
    document.dispatchEvent(e);
K. Kilian Lindberg
źródło
2

Oto rozwiązanie, które działa w Chrome i Chromium (przetestowałem tylko te platformy). Wygląda na to, że Chrome ma pewne błędy lub własne podejście do obsługi kodów kluczy, więc tę właściwość należy dodać osobno do KeyboardEvent.

function simulateKeydown (keycode,isCtrl,isAlt,isShift){
    var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } );
    Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } });     
    e.keyCodeVal = keycode;
    document.dispatchEvent(e);
}
Soren
źródło
1

Oto, co udało mi się znaleźć:

function createKeyboardEvent(name, key, altKey, ctrlKey, shiftKey, metaKey, bubbles) {
  var e = new Event(name)
  e.key = key
  e.keyCode = e.key.charCodeAt(0)
  e.which = e.keyCode
  e.altKey = altKey
  e.ctrlKey = ctrlKey
  e.shiftKey = shiftKey
  e.metaKey =  metaKey
  e.bubbles = bubbles
  return e
}

var name = 'keydown'
var key = 'a'

var event = createKeyboardEvent(name, key, false, false, false, false, true)

document.addEventListener(name, () => {})
document.dispatchEvent(event)
Konowy
źródło
1

Natywny JavaScript z rozwiązaniem obsługiwanym przez TypeScript:

Wpisz keyCode lub dowolną właściwość, której używasz, i przekaż ją do KeyboardEventInit

Przykład

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);
Eugen Sunic
źródło
1

Właśnie tego próbowałem z js / maszynopisem w chrome. Dzięki tej odpowiedzi za inspirację.

const x = document.querySelector('input');

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);
JLarky
źródło
0

jak tylko użytkownik naciśnie klawisz, możesz zapisać odwołanie nawet do tego i użyć go w dowolnym innym elemencie HTML:

EnterKeyPressToEmulate<input class="lineEditInput" id="addr333_1" type="text" style="width:60%;right:0%;float:right" onkeydown="keyPressRecorder(event)"></input>
TypeHereToEmulateKeyPress<input class="lineEditInput" id="addr333_2" type="text" style="width:60%;right:0%;float:right" onkeydown="triggerKeyPressOnNextSiblingFromWithinKeyPress(event)">
Itappears Here Too<input class="lineEditInput" id="addr333_3" type="text" style="width:60%;right:0%;float:right;" onkeydown="keyPressHandler(event)">
<script>
var gZeroEvent;
function keyPressRecorder(e)
{
  gZeroEvent = e;
}
function triggerKeyPressOnNextSiblingFromWithinKeyPress(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.nextElementSibling.dispatchEvent(gZeroEvent);
keyPressHandler(TTT);
  }
}
function keyPressHandler(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.value+= gZeroEvent.key;
event.preventDefault();
event.stopPropagation();
  }
}
</script>

możesz ustawić keyCode, jeśli utworzysz własne zdarzenie, możesz skopiować istniejące parametry z dowolnego rzeczywistego zdarzenia na klawiaturze (ignorując cele, ponieważ jest to zadanie dispatchEvent) i:

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})
yan bellavance
źródło
0

Wiem, że pytanie wymaga javascriptowego sposobu symulowania naciśnięcia klawisza. Ale dla tych, którzy szukają jQuery sposobu robienia rzeczy:

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 
Srinidhi Shankar
źródło
0

Krytyczną częścią tego, jak to działa, jest uświadomienie sobie tego charCode, keyCodei wszystkiewhichprzestarzałymi metodami . Dlatego jeśli kod przetwarzający zdarzenie naciśnięcia klawisza używa któregokolwiek z tych trzech, wówczas otrzyma fałszywą odpowiedź (np. Domyślnie 0).

Tak długo, jak uzyskujesz dostęp do zdarzenia naciśnięcia klawisza nieaktualną metodą, na przykład keypowinieneś być w porządku.

Na zakończenie dodałem podstawowy kod JavaScript do wywołania zdarzenia:

const rightArrowKey = 39
const event = new KeyboardEvent('keydown',{'key':rightArrowKey})
document.dispatchEvent(event)
Jack Kinsella
źródło
0

Chciałem zasymulować naciśnięcie klawisza „Tab” ... Rozwijając odpowiedź Trevora, widzimy, że naciskany jest specjalny klawisz, taki jak „Tab”, ale nie widzimy rzeczywistego wyniku, jaki miałby klawisz „Tab”. .

próbowano wywołać te zdarzenia dla „activeElement” oraz globalnego obiektu dokumentu zarówno - kod dla obu dodany poniżej;

fragment poniżej:

var element = document.getElementById("firstInput");

document.addEventListener("keydown", function(event) {

  console.log('we got key:', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);

  /* enter is pressed */
  if (event.keyCode == 13) {
    console.log('enter pressed:', event);

    setTimeout(function() {
      /*  event.keyCode = 13;  event.target.value += 'b';  */

      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
    }, 4);

    setTimeout(function() {
      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
    }, 100);



  } else if (event.keyCode != 0) {
    console.log('we got a non-enter press...: :', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);
  }

});
<h2>convert each enter to a tab in JavaScript... check console for output</h2>
<h3>we dispatchEvents on the activeElement... and the global element as well</h3>

<input type='text' id='firstInput' />
<input type='text' id='secondInput' />

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>
<p id="demo"></p>

Akber Iqbal
źródło