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

99

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

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

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

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

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

javascript

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

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