纯Java监听输入值的变化


96

我有什么方法可以创建一个侦听输入的常量函数,因此当该输入值更改时,会立即触发某些操作?

我正在寻找使用纯JavaScript,无插件,无框架且无法编辑HTML的东西。

某事,例如:

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

有什么帮助吗?

Answers:



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/


10
如果输入内容被javascript更改,则无法使用。既不带有“输入”事件,也不带有“更改”事件。
ImShogun

9
当javascript更改值时,您可以听什么事件?
zero_cool,

3
正如其他人指出的那样,只有在您退出输入字段后才触发。我知道,现在的答案是旧的。但是这些答案经常会突然出现,而且它们从未提及局限性。
19:10的

8

实际上,打勾的答案是完全正确的,但是答案可以是正确的ES6

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

或者可以这样写:

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

1

默认用法

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

但是,如果要在通过JS手动更改输入值时触发事件,则应该使用自定义事件(任何名称,例如“ myEvent” \“ ev”等),如果您需要侦听“ change”或“ input”事件形式然后通过JS更改输入值-您可以将自定义事件命名为“更改” \“输入”,它也将起作用。

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/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events


-6

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

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

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

op要求使用“纯javascript”方式,这意味着不使用jQuery(因此不推荐使用)
透露
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.