Подтвердить что ты не робот

Обнаруживать программные изменения текста ввода

Есть ли способ получить информацию, когда script изменяет значение текста типа ввода.

У меня

<input id='test' type='text' />

и script

document.getElementById('test').value = 'bbb';

Я хочу получать уведомления об изменении текста.

Я знаю, что меня могут уведомить keydown, keyup, onblur и т.д. (который работает, если я пытаюсь отслеживать пользовательскую типизацию), но как насчет того, что изменение выполняется программно?

Большое спасибо

p.s. Нет JQuery, или если jquery делает это, кто-то может объяснить, как это достигается.

4b9b3361

ОТВЕТЫ

Ответ 1

Если вы имеете дело с современным браузером, вы можете попробовать что-то вроде этого:

var input = document.getElementById('test');
input._value = input.value;
Object.defineProperty(input, "value", {
    get: function() {return this._value;},
    set: function(v) {
        // Do your stuff
        this._value = v;
    }
});

Это решение хорошо, если вы на самом деле не ожидаете ввода пользователем (т.е. полей ввода скрытого типа), поскольку он чрезвычайно разрушает базовые функции DOM. Помните об этом.

Ответ 2

Я считаю, что самый простой способ - фактически инициировать событие вручную:

document.getElementById('test').value = 'bbb';
var evt = new CustomEvent('change');
document.getElementById('test').dispatchEvent(evt);

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

тогда вы сможете поймать это событие change, либо inline:

<input id="test" onchange="console.log(this)">

или с прослушивателем:

document.getElementById('test').addEventListener('change',function(event) {
    console.log(event.target);
});

это имеет то преимущество, что если у вас есть вход, который может быть изменен пользователем, вы можете поймать оба этих события (от пользователя или script)

однако это зависит от того, что вы сами программно меняете значение ввода. Если вы используете библиотеки (такие как datepickr), которые изменяют значения ваших входов, вам, возможно, придется попасть в код и добавить эти два линии в нужном месте.

Ответ 4

Единственный способ мгновенно отслеживать, если было сделано изменение, будет:

var value = document.getElementById('test').value;

function trackChanges(oldVal) {
    var newVal = document.getElementById('test').value;

    if (newVal !== oldVal) {
        alert('Changes occured!');
    }

    var fn = function () { trackChanges(newVal); };

    setTimeout(fn(),100);
}

setTimeout(trackChanges(value), 100);

это означает, что вы вызываете функцию, которая вызывается каждые 100 milisecond сама по себе, чтобы проверить, выполнено ли изменение.

Возможно, ваш взгляд на что-то лучше, когда вы пытаетесь только проверить, происходит ли что-то другое, например. щелчок на элементе, возможно...