События JS: перехват события изменения значения при вводе текста

Question

У меня есть текстовый ввод, содержание которого изменяется скриптом, а не пользователем. Поэтому я хотел бы запустить событие при изменении значения. Я не могу найти подходящее событие для этого. Я даже нашел это на StackOverflow , но это не то решение, которое я ищу.

Как заставить это работать с jQuery и вводом текста, где значение установлено следующим образом:

myTextControl.value = someValue

Здесь я хочу запустить событие, чтобы увидеть новое значение.

Answer 1

Я не могу найти подходящее событие для этого.

Да, его нет.

Есть События мутации DOM , но они не поддерживаются кросс-браузерно и не запускаются для значений формы, так как они не отражаются в атрибутах (кроме IE в связи с ошибка).

Только в Mozilla для свойства value можно установить JavaScript watch для отслеживания изменений в сценарии. Только в IE, обработчик JScript onpropertychange может быть настроен так, чтобы перехватывать как скриптовые, так и пользовательские изменения. В других браузерах вам придется использовать собственный интервальный опросщик для поиска изменений.

function watchProperty(obj, name, handler) {
    if ('watch' in obj) {
        obj.watch(name, handler);
    } else if ('onpropertychange' in obj) {
        name= name.toLowerCase();
        obj.onpropertychange= function() {
            if (window.event.propertyName.toLowerCase()===name)
                handler.call(obj);
        };
    } else {
        var o= obj[name];
        setInterval(function() {
            var n= obj[name];
            if (o!==n) {
                o= n;
                handler.call(obj);
            }
        }, 200);
    }
}

watchProperty(document.getElementById('myinput'), 'value', function() {
    alert('changed!');
});

Это крайне неудовлетворительно. Он не будет реагировать на пользовательские изменения в Mozilla, он допускает только одно отслеживаемое свойство на объект в IE, а в других браузерах функция-обработчик будет вызываться намного позже в потоке выполнения.

Почти наверняка лучше переписать части скрипта, которые устанавливают value, чтобы вместо этого вызывать функцию-обертку setValue, которую можно отслеживать за изменениями, которые вы хотите перехватить.

Answer 2

Вы можете добавить обычного прослушивателя событий в поле ввода следующим образом. (используя jQuery)

$(myTextControl).change(function() {
    ...
    /* do appropriate event handling here */
    ...
});

---

Хорошо, учитывая, что javascript, который изменяет входное значение, не контролируется вами, становится трудно. У вас есть два варианта:

1.) Совместимость с Crossbrowser: Реализация опроса входного значения с помощью функции, которая постоянно проверяет, изменилось ли значение. (Что-то в этом роде).

//at beginning before other scripts changes the value create a global variable
var oldValue = myTextControl.value;

function checkIfValueChanged() {
    if(myTextControl.value != oldValue) {
        $(myTextControl).trigger("change");
        clearInterval(checker);
    }
}

//every 500ms check if value changed
var checker = setInterval('checkIfValueChanged()', 500);

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

Если значение может изменяться несколько раз с помощью внешнего скрипта, просто запустите функцию интервала вместо ее отмены и просто обновите oldValue;

2.) AFAIK Пока не поддерживается всеми браузерами (проверьте его на тех, которые вам нужны)

Вы можете привязать к специальному событию DOM Level 3Event: DOMAttrModified (в Firefox, может быть, другие тоже, я думаю, у Opera тоже есть, Safari ??, Chrome ??) и в IE, конечно, другое имя propertychange (и является частной собственностью и отличается от поведения W3C)

Теперь в идеале вы могли бы объединить эти два варианта и проверить, есть ли поддержка DOMAttrModified или propertychange, и использовать их соответственно или использовать решение для опроса.

---

Чтение ссылок

W3C DOM Mutation Events

Событие W3C DOMAttrModified

MSDN DHTML property change Событие

Обновлен подключаемый модуль jQuery CSS для мониторинга свойств

Последняя ссылка - это какой-то парень, который в основном уже создал плагин jQuery, выполняющий описанные мной вещи (не проверенный мной, предоставленный только в качестве ссылки)

Answer 3

попробуйте

$('#myTextControl').bind('input', function(){
  console.log('value changed');
});

Answer 4

var oldVal = $('#myTextControl').val();

//Your script that changes the value

if(oldVal != $('#myTextControl').val())
{
//Your content has changed, do something
}

Answer 5

Вам нужно будет прослушивать события клавиатуры, когда элемент, который вы смотрите, имеет фокус.