Chrome: Моделюйте події натискання клавіш у текстовому полі вводу за допомогою javascript - javascript

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

Причина: Я автоматизую багато завдань для введення даних на веб-інтерфейсі, який не надає API. Зміна поля введення за допомогою .value не запускає сторону JS (кутову) інтерфейсу. Ось чому я хочу імітувати подію натискання клавіші.

Спочатку я спробував:

var inp = document.getElementById("rule-type");
inp.dispatchEvent(new KeyboardEvent("keypress",{"key":"a"}));

Потім я дізнався в Chrome key і code залишається як 0 і не змінюється в KeyBoardEvent.

Тож я створив окрему подію ev = new KeyboardEvent("keypress",{"key":"a", "code": "KeyA"})

А потім я відправив знову, заява про повернення є true але це не змінює поле введення.

Рішення має бути в чистому javascript, а не в jQuery.

Відповіді:

Ви не зможете запустити подію, яка призведе до заповнення тексту введенням. Дивіться цей фрагмент від MDN:

Примітка:запуск події вручну не створює дії за замовчуванням пов'язані з цією подією. Наприклад, активація ключової події вручну не призводить до того, що цей лист відображається у фокусованому введенні тексту. В У випадку подій користувацького інтерфейсу це важливо з міркувань безпеки не дозволяє сценаріям імітувати дії користувача, які взаємодіють з сам браузер.

Дякую @ gforce301

Найкращою ставкою може бути встановлення значення та потім відправити подію.

ІМХО ви все це робите неправильно. Angular не "слухає" keypress або тому подібне. Це прослуховування change і input події. Дивіться приклад нижче. Він робить (правда, це просто) те, що вам потрібно.

var iButton = document.getElementById("inputButton");
iButton.addEventListener("click", simulateInput);

var cButton = document.getElementById("changeButton");
cButton.addEventListener("click", simulateChange);

function simulateInput() {
var inp = document.getElementById("name");
var ev = new Event("input");

inp.value =inp.value + "a";
inp.dispatchEvent(ev);
}

function simulateChange() {
var inp = document.getElementById("name");
var ev = new Event("change");

inp.value = "changed";
inp.dispatchEvent(ev);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">

<p>Input something in the input box:</p>
<p>Name : <input id="name" type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

<button id="inputButton">I simulate the "input" event.</button>
<button id="changeButton">I simulate the "change" event.</button>