纯Javascript听取输入值的变化

Question

有什么办法可以创建一个监听输入的常量函数,所以当输入值改变时,会立即触发某些内容吗？

我正在寻找使用纯javascript,没有插件,没有框架的东西,我无法编辑HTML.

东西,例如:

当我更改输入中的值时MyObject,此函数将运行.

有帮助吗？

Answer 1

这就是事件的用途.

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

Answer 2

作为一个基本的例子......

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/

Answer 3

默认用法

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

但是，如果您想在通过 JavaScript 手动更改输入值时触发事件，您应该使用自定义事件（任何名称，如“myEvent”、“ev”等）。如果您需要监听表单“更改”或“输入”事件，并且通过 JavaScript 更改输入值，则可以将自定义事件命名为“更改”或“输入”，它也可以工作。

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


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

创建和触发事件

Answer 4

实际上，打勾的答案是完全正确的，但答案可能是ES6形状：

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

或者可以写成如下：

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

Answer 5

另一种方法可以使用document.querySelector()：

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});