Чи можливо імітувати ключові події у пресі програмно?

Чи можливо програмно моделювати події ключових прес-програм в JavaScript?

Версія не-jquery, яка працює як у веб-програмі, так і в 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);

Якщо у вас все в порядку, використовуйте 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");
});

Те, що ви можете зробити, це програмно запускати слухачів, що виконують ключові слова, запускаючи keyevents . Це має сенс дозволити це з точки зору безпеки. Використовуючи цю здатність, ви можете застосувати типовий зразок спостерігача . Ви можете назвати цей метод "імітацією".

Нижче наведено приклад того, як це досягти у стандарті W3C DOM разом із 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...
  }
}

Цей приклад адаптовано з: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

У jQuery:

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

Але останнім часом [DOM] не існує способу дійсно запускати ключі, залишаючи браузер-пісочницю.І всі основні постачальники браузерів будуть дотримуватися цієї концепції безпеки.

Що стосується плагінів , таких як Adobe Flash - які засновані на NPAPI-, і дозволяють в обхід пісочниці: вони висновок з експлуатації ; Firefox .

Детальне пояснення:

Ви не можете і не повинні з міркувань безпеки (як уже вказував Пекка). Ви завжди будете потребувати взаємодії з користувачем між ними. Додатково уявіть, що шанси постачальників браузерів пред'являть позов користувачам, оскільки різні події програмної клавіатури призведуть до атак підробки.

Дивіться цю публікацію щодо альтернатив та додаткових відомостей. Завжди є флеш-копіювання та вставка. Ось елегантний приклад . Водночас це свідчення того, чому Інтернет відходить від постачальників плагінів.

Існує аналогічне мислення щодо безпеки, яке застосовується у випадку відмови від політики CORS для програмного доступу до віддаленого вмісту.

Відповідь:
У звичайних обставинах немає можливості програмно запускати клавіші введення в середовищі браузера з піском .

Підсумок: Я не кажу, що це не буде можливим у майбутньому за спеціальних режимів браузера та / або привілеїв до досягнення кінцевої мети ігор або подібного досвіду користувача. Однак перед входом у такі режими користувачеві буде запропоновано дозволу та ризики, як у моделі API повноекранного режиму .

Корисно: У контексті KeyCodes цей інструмент та відображення клавішних кодів стане у нагоді.

Розкриття інформації: Відповідь заснована на відповіді тут .

Ви можете відправляти події клавіатури на такому елементі

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

Ви можете використовувати 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");
  }
}

Я цього не перевіряв, але він адаптований з коду документації dispatchEvent () . Ви, ймовірно, захочете прочитати це, а також документи для createEvent () та initKeyEvent ().

Ви можете створювати та відправляти події на клавіатурі, і вони запускатимуть відповідні зареєстровані обробники подій, однак вони не створюють жодного тексту , якщо, наприклад, надсилаються до елемента введення.

Щоб повністю імітувати введення тексту, потрібно створити послідовність подій клавіатури плюс чітко встановити текст елемента введення. Послідовність подій залежить від того, наскільки ретельно ви хочете імітувати введення тексту.

Найпростішою формою буде:

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

У деяких випадках keypressподія не може забезпечити необхідну функціональність. З Документів mozilla ми бачимо, що функція застаріла:

Ця функція більше не рекомендується. Хоча деякі веб-переглядачі, можливо, все ще підтримують його, можливо, його вже видалено з відповідних веб-стандартів, він може бути видалений або може зберігатися лише для сумісності. Уникайте його використання та поновлюйте наявний код, якщо це можливо; див. таблицю сумісності внизу цієї сторінки, щоб направити своє рішення. Майте на увазі, що ця функція може припинити роботу в будь-який час.

Отже, оскільки keypressподія поєднується з двох послідовно запущених подій keydownі наступних keyupза одним ключем, просто генеруйте події одна за одною:

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

Спираючись на відповідь від alex2k8, ось переглянута версія, яка працює у всіх браузерах, які підтримує jQuery (проблема полягала в відсутніх аргументах до jQuery.event.trigger, який легко забути при використанні цієї внутрішньої функції).

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

Ви можете навіть просунути це далі і дозволити йому не тільки імітувати подію, але й фактично вставити персонаж (якщо він є вхідним елементом), однак є багато крос-браузерних готчей, коли намагаються це зробити. Краще використовувати більш досконалий плагін, як SendKeys .

Для зацікавлених можна фактично відтворити події введення з клавіатури надійно. Для зміни тексту в області введення (переміщення курсорів або сторінки за допомогою символу введення) вам слід уважно слідувати моделі події DOM: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Модель повинна робити:

• фокус (розсилається на DOM з цільовим набором)

Потім для кожного персонажа:

• натискання клавіш (надсилається в DOM)
• перед введенням (відправляється в ціль, якщо це текстова область або вхід)
• натискання клавіші (відправляється на DOM)
• вхід (відправляється в ціль, якщо це текстова область або вхід)
• зміна (відправляється в ціль, якщо її вибір)
• клавіш (відправляється в DOM)

Потім, необов'язково для більшості:

• розмиття (розсилається на DOM з цільовим набором)

Це фактично змінює текст на сторінці через javascript (не змінюючи висловлювання значень) і відкладає будь-яких слухачів / обробників JavaScript належним чином. Якщо ви зіпсуєте послідовність, javascript не запуститься у відповідному порядку, текст у полі введення не зміниться, виділення не зміняться або курсор не перейде до наступного простору в текстовій області.

На жаль, код був написаний для роботодавця під NDA, тому я не можу поділитися ним, але це, безумовно, можливо, але ви повинні відтворити весь "стек" для кожного елемента в правильному порядку.

Станом на 2019 рік для мене це рішення спрацювало:

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

Я використовував це в грі в браузері, щоб підтримувати мобільні пристрої з імітованою клавіатурою.

Уточнення: Цей код відправляє одну keydownподію, тоді як справжнє натискання клавіші викликає одну keydownподію (або кілька з них, якщо вона триває довше), а потім одну keyupподію, коли ви відпускаєте цей ключ. Якщо вам потрібні keyupподії теж, також можна моделювати keyupподії шляхом зміни "keydown"до "keyup"в фрагменті коду.

Це також посилає подію на всю веб-сторінку, звідси і на document. Якщо ви хочете, щоб лише подія отримала подію, ви можете замінити documentпотрібний елемент.

Цей підхід підтримує крос-браузер, що змінює значення ключового коду . Джерело

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

просто використовуйте 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 хочуть імітувати 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})

Ось бібліотека, яка справді допомагає: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Я не знаю, звідки це взялося, але це корисно. Він додає .simulate()метод до window.KeyEvent, тому ви використовуєте його просто з KeyEvent.simulate(0, 13)для імітації enterабо KeyEvent.simulate(81, 81)для 'Q'.

Я отримав це на https://github.com/ccampbell/mousetrap/tree/master/tests .

Це працювало для мене, і це імітує клавіш для мого текстового тексту. якщо ви хочете його для всієї сторінки просто поставити KeySimulation()на <body>подібних <body onmousemove="KeySimulation()">або , якщо не onmousemoveте onmouseoverі onloadтеж працює.

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

Він був одноразовим рядом завдяки простому використанню в консольному контексті. Але, мабуть, корисний все-таки.

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

Ось рішення, яке працює в Chrome і Chromium (протестували лише ці платформи). Здається, у Chrome є певна помилка або власний підхід до обробки ключових кодів, тому цю властивість потрібно додати окремо до 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);
}

Це мені вдалося знайти:

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 з підтримкою TypeScript:

Введіть keyCode або будь-яку властивість, яку ви використовуєте, та передайте її KeyboardEventInit

Приклад

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

Це те, що я спробував з js / typecript у chrome. Завдяки цій відповіді натхнення.

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

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

як тільки користувач натисне відповідну клавішу, ви можете зберегти посилання на це навіть і використовувати його на будь-якому іншому 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>

ви можете встановити keyCode, якщо створюєте свою власну подію, ви можете скопіювати існуючі параметри з будь-якої реальної події клавіатури (ігноруючи цілі з часу її роботи dispatchEvent) та:

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

Я знаю, що питання задає javascript спосіб моделювання натискання клавіші. Але для тих, хто шукає jQuery способу вчинити:

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

Важлива частина отриманні цього на роботу, щоб зрозуміти , що charCode, keyCodeі whichє всі застарілими методами . Тому, якщо код, який обробляє подію натискання клавіш, використовує будь-яку з цих трьох, то він отримає помилкову відповідь (наприклад, за замовчуванням 0).

Поки ви отримуєте доступ до події натискання клавіш непридатним методом, наприклад key, вам повинно бути в порядку.

Для завершення я додав базовий код Javascript для запуску події:

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

Я хотів імітувати прес "Tab" ... Розгортаючи відповідь Тревора, ми бачимо, що спеціальна клавіша на зразок "вкладка" натискає, але ми не бачимо фактичного результату, який мав би натиснути "вкладку" .. .

спробували відправити ці події для "activeElement", а також глобального об'єкта документа - код для обох доданих нижче;

фрагмент нижче:

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>