1 (2018-08-01 16:30:10 отредактировано icedragonyp)

Тема: Имитация клавиатурного "enter" в поле input

Может кому-то это пригодиться...

Был недавно  озадачен вопросом:
Ситуация: имеется поле input в которое программно заносится новое значение, взамен изначально существующего. Заносится программно:

<input class="input3" name="reverse_course" value="7969.99531177" autocomplete="off" maxlength="18" type="text">

Выполняем код ->
JS:

window.document.querySelector(".input3)").value = 1000;

Програмное действие на занесение нового значения в поле input не вызывает событие, то есть на стороне сервера никаких действий, после занесения нового значения в поле, не производится (в отличие от ручного ввода символов в поле, когда с клавитуры набирается значение "1000" -> за это отвечает атрибут  type="text", который нам говорит о том, что ожидается ввод нового значения с клавиатуры, а не какие-то там программые финты )....

Что делать?
Использование принудительной замены "submit" вместо "text" - не приносит положительного результа.... сервер обрабатывает старое значение из поля, игнорируя новое...

Решение:
Меняем в DOM: type = "text" на "type = "checkbox"

window.document.querySelector("input3").type = "checkbox";

помещем в поле input новое значение "1000", не обращая внимание на то, что сейчас у нас в наличие не поле для ввода, а чекбокс

window.document.querySelector("input3").value =1000;

Далее нам необходимо сделать программный клик на этом псевдо-поле. Делаем его следующи образом:

        var targetNode = window.document.querySelector("input3");
        if (targetNode) {
            triggerMouseEvent (targetNode, "mouseover"); // мышь появляется над элементом
            triggerMouseEvent (targetNode, "mousedown"); // Кнопка мыши нажата над элементом.
            triggerMouseEvent (targetNode, "mouseup"); // Кнопка мыши отпущена над элементом.
            triggerMouseEvent (targetNode, "click");
            } else window.console.log ("*** Target node not found!");
    
        function triggerMouseEvent (node, eventType) {
            var clickEvent = window.document.createEvent ('MouseEvents');
            clickEvent.initEvent (eventType, true, true);
            node.dispatchEvent (clickEvent);
        }

(Внимание: Обычный клик может не сработать -> window.document.querySelector("input3").click();)

Восстанавливаем прежний DOM:

window.document.querySelector(input3").type = "text";

Таким обраом удается эмулировать клавиатуное действие по программному клику. Т.е.  программной вставкой нового ззначения в поле input мы, как бы спровоцировали (сгенерировали) реальный ввод с клавиатуры.

Сайт icedragonyp

Поделиться