Чистый Javascript прослушивает изменение входного значения

99

Есть ли способ создать постоянную функцию, которая прослушивает ввод, чтобы при изменении этого входного значения что-то немедленно запускалось?

Я ищу что-то, использующее чистый javascript, без плагинов, без фреймворков, и я не могу редактировать HTML.

Что-то, например:

Когда я изменяю значение на входе MyObject, эта функция запускается.

Любая помощь?

геспинья
источник

Ответы:

134

Для этого и нужны мероприятия .

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});
Квентин
источник
21
Не будет работать, если значение ввода будет изменено с помощью javascript
ImShogun
1
Обратите внимание, что typeof this.valueэто string. Если необходимо число, преобразуйте его с помощью parseInt или parseFloat .
Аксели Пален
34

В качестве основного примера ...

HTML:

<input type="text" name="Thing" value="" />

Сценарий:

/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

Вот скрипка: http://jsfiddle.net/Niffler/514gg4tk/

Niffler
источник
11
Не будет работать, если содержимое ввода изменено с помощью javascript. ни с событием "ввод", ни "изменение".
ImShogun
9
Какое событие вы можете прослушивать, когда значение изменяется с помощью javascript?
zero_cool 06
3
И, как указывали другие, не срабатывает, пока вы не выйдете из поля ввода. Я знаю старый ответ. Но эти ответы появляются на удивление часто, и в них никогда не упоминаются ограничения.
Torxed 02
@ImShogun есть идеи, как "поддержать" случай, когда ввод изменен через JS?
Алессио
9

На самом деле, отмеченный ответ совершенно правильный, но ответ может быть в ES6форме:

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

Или можно написать, как показано ниже:

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});
AmerllicA
источник
2

Использование по умолчанию

el.addEventListener('input', function () {
    fn();
});

Но если вы хотите запускать событие, когда вы меняете значение ввода вручную через JS, вы должны использовать настраиваемое событие (любое имя, например 'myEvent' \ 'ev' и т. Д.), ЕСЛИ вам нужно прослушивать событие 'change' или 'input' формы и вы меняете значение input через JS - вы можете назвать свое настраиваемое событие 'change' \ 'input', и оно тоже будет работать.

var event = new Event('input');
el.addEventListener('input', function () { 
  fn();
});
form.addEventListener('input', function () { 
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(input);

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Азуне-НК
источник
-7

вместо id используйте заголовок для идентификации вашего элемента и напишите код, как показано ниже.

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});
кай
источник
оп просил «чистый JavaScript» путь, смысл не JQuery - отсюда downvotes
revelt