Событие изменения триггера, когда входное значение изменилось программно?

У меня есть ввод в моей форме.

<input type="text" id="changeProgramatic" onchange="return ChangeValue(this);"/>

Если я изменю значение в этом текстовом поле (changeProgramatic), используя другую функцию JavaScript, это не вызовет событие изменения. (Примечание: я передаю 'this' в метод)

Ответы

Ответ 1

Вы используете jQuery, правильно? Отдельный JavaScript из HTML.

Вы можете использовать trigger или triggerHandler.

var $myInput = $('#changeProgramatic').on('change', ChangeValue);

var anotherFunction = function() {
  $myInput.val('Another value');
  $myInput.trigger('change');
};

Ответ 2

Решение Vanilla JS:

var el = document.getElementById('changeProgramatic');
el.value='New Value'
el.dispatchEvent(new Event('change'));

Обратите внимание, что dispatchEvent не работает в старом IE (см.: caniuse). ~~Таким образом, вы должны использовать его только на внутренних сайтах (не на сайтах с широкой аудиторией)~~ ,

Поэтому, начиная с 2019 года, вы, возможно, захотите убедиться, что ваши клиенты/аудитория не используют Windows XP (да, некоторые все еще используют в 2019 году). Возможно, вы захотите использовать условные комментарии, чтобы предупредить клиентов о том, что вы не поддерживаете старый IE (в данном случае до IE 11).

Ответ 3

Вызов самого обработчика после изменения текста программно:

var input = document.getElementById("changeProgramatic");
input.value = 'New Value';
input.onchange();

Ответ 4

Вы узнаете решение, возможно, это поможет:

В текстовом поле мне нужно использовать функцию bind jQuery. Поэтому, когда вы запускаете, это сработает. У меня возникла проблема, аналогичная вам, и я связываю непосредственно событие, после чего я запускаю это событие, bups, он не будет работать. Поэтому я меняю метод bind на использование bind ( "name-event", function() {}.. и он работает, как я хочу.