Установка текста в поле ввода на сайте

Question

Подскажите пожалуйста, вот есть сторонний сайт к примеру яндекс - страница авторизации. Я использую функцию, чтобы установить в форму ввода свой текст:

document.getElementById("Textinput-Control").value = "my_text"

или

document.getElementsByClassName("Textinput-Control")[0].value = "my_text"

И визуально оно работает, то есть текст реально устанавливается в поле ввода, но, как только я нажимаю зарегистрироваться или продолжить, выдается ошибка, что логин не введен.

Если ввести текст с клавиатуры, то проблемы такой естественно не возникает, проверял на другом сайте, там ввод текста в поле ввода через js - работает нормально.

Подскажите пожалуйста, как бы понять, из за чего это икк это обойти ?

Answer 1

Скорее всего сторонний сайт использует концепцию MVC (или подобную, есть еще MVP, MVVM и другие). Модель данных хранится отдельно от преставления (преставление это ваш "Textinput-Control") и при нажатии на кнопки регистрации данные для проверки (и отправки на сервер) берутся с модели, а не с представления. Эта концепция очень популярна, используется в ангуляре, реакте и других фреймворках.

Чтобы решить задачу - нужно тригернуть изменение модели. Скорее всего сработает dispatchEvent на нужном элементе. Правда не известно, какой из ивентов надо тригерить. Это уже зависит от реализации стороннего сайта. Вот пример, который показывает что простое изменение value не тригерит change и input функции, но их можно тригетнуть с помощью dispatchEvent.

test.addEventListener('change', function() {
  console.log('change', this.value);
});

test.addEventListener('input', function() {
  console.log('input', this.value);
});

btn.addEventListener('click', function() {
  test.value = 'qwerty';
});

btn1.addEventListener('click', function() {
  test.setAttribute('value', 'qwerty123');
});

btn2.addEventListener('click', function() {
  test.value = '123qwerty';
  const event = new Event('change');
  test.dispatchEvent(event);
});

btn3.addEventListener('click', function() {
  test.value = '123qwerty123';
  const event = new Event('input');
  test.dispatchEvent(event);
});

<input id="test" type="text">
<button id="btn">Set text directly</button>
<button id="btn1">Set text as attribute</button>
<button id="btn2">Set text with change event</button>
<button id="btn3">Set text with input event</button>

В некоторых случаях, простого new Event('change') будет не достаточно и придется определить параметры ивента, например target. Но простым присваиванием не получится (так как в объекте Event большинство свойств только для чтения). Придется использовать Object.defineProperty. Например вот так:

Object.defineProperty(event, 'target', {writable: false, value: test});

БЛОГ НА HUSL

Установка текста в поле ввода на сайте

Ответы (1 шт):