Моя цель - наблюдать входное значение и запускать обработчик, когда его значение изменяется программно. Мне это нужно только для современных браузеров.
Я пробовал много комбинаций с помощью defineProperty
, и это моя последняя итерация:
var myInput=document.getElementById("myInput");
Object.defineProperty(myInput,"value",{
get:function(){
return this.getAttribute("value");
},
set:function(val){
console.log("set");
// handle value change here
this.setAttribute("value",val);
}
});
myInput.value="new value"; // should trigger console.log and handler
Это похоже на то, что я ожидаю, но это похоже на хак, поскольку я переопределяю существующее свойство value и играю с двойным статусом value
(атрибут и свойство). Он также разбивает событие change
, которое не похоже на измененное свойство.
Другие мои попытки:
- цикл setTimeout/setInterval, но это не чисто.
- различные
watch
иobserve
polyfills, но они ломаются для свойства входного значения
Каким будет правильный способ добиться того же результата?
Live demo: http://jsfiddle.net/L7Emx/4/
[Изменить] Чтобы уточнить: мой код просматривает элемент ввода, в котором другие приложения могут нажимать обновления (например, в результате вызовов ajax, или в результате изменений в других полях). Я не контролирую, как другие приложения нажимают обновления, я просто наблюдатель.
[Изменить 2] Чтобы уточнить, что я имею в виду под "современным браузером", я был бы очень доволен решением, которое работает на IE 11 и Chrome 30.
[Обновить] Обновлено демо на основе принятого ответа: http://jsfiddle.net/L7Emx/10/
Фокус, предложенный @mohit-jain, заключается в добавлении второго ввода для взаимодействия с пользователем.