Apakah mungkin untuk mensimulasikan acara pers kunci secara terprogram?

Apakah mungkin untuk mensimulasikan acara pers utama secara terprogram dalam JavaScript?

Versi non-jquery yang berfungsi di webkit dan tokek:

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

Jika Anda boleh menggunakan 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");
});

Yang dapat Anda lakukan adalah secara terprogram memicu keyevent pendengar dengan menembakkan keyevents . Masuk akal untuk mengizinkan ini dari perspektif keamanan kotak pasir. Dengan menggunakan kemampuan ini, Anda dapat menerapkan pola pengamat yang khas . Anda dapat menyebut metode ini "simulasi".

Di bawah ini adalah contoh bagaimana mencapai ini dalam standar DOM W3C bersama dengan 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...
  }
}

Contoh ini diadaptasi dari: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Di jQuery:

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

Tetapi pada saat ini, tidak ada [DOM] cara untuk benar-benar memicu keyevents meninggalkan browser-sandbox. Dan semua vendor browser utama akan mematuhi konsep keamanan itu.

Adapun plugin seperti Adobe Flash - yang didasarkan pada NPAPI-, dan mengizinkan melewati kotak pasir: ini adalah penghapusan bertahap ; Firefox .

Penjelasan detail:

Anda tidak dapat dan Anda tidak boleh karena alasan keamanan (seperti yang telah ditunjukkan Pekka). Anda akan selalu membutuhkan interaksi pengguna di antaranya. Selain itu bayangkan peluang vendor browser dituntut oleh pengguna, karena berbagai acara keyboard terprogram akan menyebabkan spoofing serangan.

Lihat posting ini untuk alternatif dan lebih jelasnya. Selalu ada salin dan tempel berbasis flash. Ini adalah contoh yang elegan . Pada saat yang sama itu adalah kesaksian mengapa web menjauh dari vendor plugin.

Ada pola pikir keamanan serupa yang diterapkan dalam kasus kebijakan CORS opt-in untuk mengakses konten jarak jauh secara terprogram.

Jawabannya adalah:
Tidak ada cara untuk secara terprogram memicu kunci input di lingkungan browser berpasir dalam keadaan normal .

Bottomline: Saya tidak mengatakan itu tidak akan mungkin terjadi di masa depan, di bawah mode browser khusus dan / atau hak istimewa menuju tujuan akhir permainan, atau pengalaman pengguna yang serupa. Namun sebelum memasuki mode tersebut, pengguna akan dimintai izin dan risiko, mirip dengan model API Layar Penuh .

Berguna: Dalam konteks KeyCodes, alat ini dan pemetaan kode kunci akan berguna.

Pengungkapan: Jawabannya didasarkan pada jawaban di sini .

Anda dapat mengirim acara keyboard pada elemen seperti ini

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

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

Saya tidak menguji ini, tetapi ini diadaptasi dari kode pada dokumentasi dispatchEvent () . Anda mungkin ingin membacanya, dan juga dokumen untuk createEvent () dan initKeyEvent ().

Anda dapat membuat dan mengirim acara keyboard, dan mereka akan memicu penangan acara terdaftar yang sesuai, namun mereka tidak akan menghasilkan teks apa pun , jika dikirim ke elemen input misalnya.

Untuk sepenuhnya mensimulasikan input teks, Anda perlu membuat urutan kejadian keyboard dan secara eksplisit mengatur teks elemen input. Urutan peristiwa tergantung pada seberapa menyeluruh Anda ingin mensimulasikan input teks.

Bentuk paling sederhana adalah:

$('input').val('123');
$('input').change();

Dalam beberapa kasus keypressacara tidak dapat memberikan kesungguhan yang diperlukan. Dari mozilla docs kita dapat melihat bahwa fitur tersebut sudah usang:

Fitur ini tidak lagi direkomendasikan. Meskipun beberapa browser mungkin masih mendukungnya, mungkin telah dihapus dari standar web yang relevan, mungkin sedang dalam proses dijatuhkan, atau hanya dapat disimpan untuk tujuan kompatibilitas. Hindari menggunakannya, dan perbarui kode yang ada jika memungkinkan; lihat tabel kompatibilitas di bagian bawah halaman ini untuk memandu keputusan Anda. Ketahuilah bahwa fitur ini dapat berhenti bekerja kapan saja.

Jadi, karena keypressacara tersebut digabungkan dari dua peristiwa yang dipecat secara berurutan keydown, dan yang mengikutinya keyupuntuk kunci yang sama, buat saja peristiwa satu per satu:

element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
element.dispatchEvent(new KeyboardEvent('keyup',{'key':'Shift'}));

Membangun jawaban dari alex2k8, berikut adalah versi revisi yang berfungsi di semua browser yang didukung jQuery (masalahnya ada pada argumen yang tidak ada di jQuery.event.trigger, yang mudah dilupakan saat menggunakan fungsi internal itu).

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

Anda bahkan dapat mendorong ini lebih jauh dan membiarkannya tidak hanya mensimulasikan acara tetapi juga benar-benar memasukkan karakter (jika itu adalah elemen input), namun ada banyak gotcha lintas-peramban ketika mencoba melakukan itu. Lebih baik gunakan plugin yang lebih rumit seperti SendKeys .

Pada 2019, solusi ini telah bekerja untuk saya:

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

Saya menggunakan ini di permainan browser saya, untuk mendukung perangkat seluler dengan tombol simulasi.

Klarifikasi: Kode ini mengirimkan satu keydownperistiwa, sementara penekanan tombol nyata akan memicu satu keydownperistiwa (atau beberapa di antaranya jika ditahan lebih lama), dan kemudian satu keyupperistiwa ketika Anda melepaskan kunci itu. Jika Anda memerlukan keyupacara juga, Anda juga dapat mensimulasikan keyupacara dengan mengubah "keydown"ke "keyup"dalam potongan kode.

Ini juga mengirimkan acara ke seluruh halaman web, karenanya document. Jika Anda hanya ingin elemen tertentu untuk menerima acara, Anda bisa mengganti documentelemen yang diinginkan.

Bagi mereka yang tertarik, Anda dapat, pada kenyataannya, menciptakan kembali peristiwa input keyboard dengan andal. Untuk mengubah teks dalam area input (memindahkan kursor, atau halaman melalui karakter input) Anda harus mengikuti model acara DOM dengan cermat: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Model harus dilakukan:

• fokus (dikirim pada DOM dengan target yang ditetapkan)

Kemudian untuk setiap karakter:

• keydown (dikirim pada DOM)
• beforeinput (dikirim pada target jika berupa textarea atau input)
• keypress (dikirim pada DOM)
• input (dikirim pada target jika berupa textarea atau input)
• ubah (dikirim pada target jika a pilih)
• keyup (dikirim pada DOM)

Kemudian, secara opsional untuk sebagian besar:

• blur (dikirim pada DOM dengan target yang ditetapkan)

Ini sebenarnya mengubah teks di halaman melalui javascript (tanpa mengubah pernyataan nilai) dan mematikan pendengar / penangan javascript apa pun dengan tepat. Jika Anda mengacaukan urutan, javascript tidak akan menyala dalam urutan yang sesuai, teks di kotak input tidak akan berubah, pilihan tidak akan berubah atau kursor tidak akan pindah ke ruang berikutnya di area teks.

Sayangnya kode ini ditulis untuk seorang majikan di bawah NDA jadi saya tidak bisa membagikannya, tetapi itu pasti mungkin tetapi Anda harus membuat ulang seluruh input kunci "tumpukan" untuk setiap elemen dalam urutan yang benar.

Pendekatan ini mendukung cross-browser mengubah nilai kode kunci . Sumber

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

cukup gunakan 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 ingin mensimulasikan 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})

Berikut perpustakaan yang benar-benar membantu: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Saya tidak tahu dari mana asalnya, tetapi ini sangat membantu. Itu menambahkan .simulate()metode window.KeyEvent, jadi Anda menggunakannya hanya dengan KeyEvent.simulate(0, 13)untuk mensimulasikan enteratau KeyEvent.simulate(81, 81)untuk'Q' .

Saya mendapatkannya di https://github.com/ccampbell/mousetrap/tree/master/tests .

Ini bekerja untuk saya dan itu mensimulasikan keyup untuk textaera saya. jika Anda ingin untuk seluruh halaman hanya menempatkan KeySimulation()pada <body>seperti ini <body onmousemove="KeySimulation()">atau jika tidak onmousemovemaka onmouseoveratau onloadkarya juga.

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

Itu tunggal baris sekali karena penggunaan yang mudah dalam konteks konsol. Tapi mungkin masih bermanfaat.

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

Berikut adalah solusi yang berfungsi di Chrome dan Chromium (hanya menguji platform ini). Tampaknya Chrome memiliki beberapa bug atau pendekatan sendiri untuk menangani kode kunci sehingga properti ini harus ditambahkan secara terpisah ke 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);
}

Inilah yang berhasil saya temukan:

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)

JavaScript asli dengan solusi yang didukung TypeScript:

Ketikkan keyCode atau properti apa pun yang Anda gunakan dan berikan ke KeyboardEventInit

Contoh

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);

Itulah yang saya coba dengan js / typescript di chrome. Terima kasih atas jawaban ini untuk inspirasi.

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

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);

segera setelah pengguna menekan kunci yang dimaksud, Anda dapat menyimpan referensi untuk hal itu dan menggunakannya pada HTML elemen lainnya:

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>

Anda dapat mengatur keyCode jika Anda membuat acara Anda sendiri, Anda dapat menyalin parameter yang ada dari setiap kejadian keyboard nyata (mengabaikan target karena itu adalah tugas dispatchEvent) dan:

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})

Saya tahu pertanyaannya menanyakan cara javascript mensimulasikan penekanan tombol. Tetapi bagi mereka yang mencari cara jQuery dalam melakukan sesuatu:

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 

Bagian penting dari membuat ini berfungsi adalah untuk menyadari hal itu charCode, keyCodedan semuanyawhich merupakan metode yang sudah ketinggalan zaman . Karena itu jika mengolah kode acara tekan tombol menggunakan salah satu dari ketiganya, maka itu akan menerima jawaban palsu (misalnya default 0).

Selama Anda mengakses acara pers kunci dengan metode yang tidak usang, seperti key, Anda harus OK.

Untuk penyelesaian, saya telah menambahkan kode Javascript dasar untuk memicu acara:

const rightArrowKey = 39
const event = new KeyboardEvent('keydown',{'key':rightArrowKey})
document.dispatchEvent(event)

Saya ingin mensimulasikan pers 'Tab' ... Memperluas jawaban Trevor, kita dapat melihat bahwa tombol khusus seperti 'tab' memang ditekan tetapi kami tidak melihat hasil aktual yang dimiliki pers 'tab'. .

mencoba mengirimkan acara-acara ini untuk 'activeElement' serta objek dokumen global keduanya - kode untuk keduanya yang ditambahkan di bawah ini;

potongan bawah ini:

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>