Question

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

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

东西，例如：

当我更改输入MyObject中的值时，此功能会运行。

任何帮助？

Answer 1

这是events的用途。

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

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

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

或者可以写成如下：

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

Answer 4

默认用法

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

但是，如果要在通过JS手动更改输入值时触发事件，则应该使用自定义事件（任何名称，例如“ myEvent” \“ ev”等），如果需要侦听表单“ change”或“ 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

Answer 5

2020年的另一种方法可能是使用document.querySelector()：

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

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

Answer 6

如果您想在每次键盘敲击时监视更改。

const textarea = document.querySelector(`#string`)
textarea.addEventListener("keydown", (e) =>{
   console.log('test') 
})

Answer 7

Quentin 答案的不同版本：

HTMLInputElementObject.addEventListener('input', (e) => {
    // Do something here...
});

Answer 8

每次用户输入一些值时，做一些事情。

var element = document.getElementById('input');
element.addEventListener('input', function() {
 // Do something 
});

Answer 9

代替标题，使用title标识您的元素并编写如下代码。

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

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});

纯Javascript听取输入值的变化

9 个答案: