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

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

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);

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");
});

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 .

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

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

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

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

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

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 .

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.

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.

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);

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})

Oto biblioteka, która naprawdę pomaga: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Nie wiem skąd to się wzięło, ale jest pomocne. Dodaje .simulate()do sposobu window.KeyEvent, aby go użyć po prostu z KeyEvent.simulate(0, 13)za symulowanie enterlub KeyEvent.simulate(81, 81)dla'Q' .

Mam go na https://github.com/ccampbell/mousetrap/tree/master/tests .

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>

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);

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

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)

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);

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);

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

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); 

Krytyczną częścią tego, jak to działa, jest uświadomienie sobie tego charCode, keyCodei wszystkiewhich są przestarzał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)

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>