blocks|key|146680|text|这就是events的用途。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|146681|HTMLInputElementObject.addEventListener('input',+function+(evt)+{
++++something(this.value);
});|code-block|syntax|javascript|146682|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/API/Event^0|3|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

This is what <a href="https://developer.mozilla.org/en/docs/Web/API/Event" rel="noreferrer">events</a> are for. 

<pre><code>HTMLInputElementObject.addEventListener('input', function (evt) {
 something(this.value);
});
</code></pre>

blocks|key|144384|text|作为一个基本的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|144385|HTML：|144386|<input+type="text"+name="Thing"+value=""+/>|code-block|syntax|javascript|144387|脚本：|144388|/*+event+listener+*/
document.getElementsByName("Thing")[0].addEventListener('change',+doThing);

/*+function+*/
function+doThing(){
+++alert('Horray!+Someone+wrote+"'+%2B+this.value+%2B+'"!');
}|144389|这里有一个小把戏：http://jsfiddle.net/Niffler/514gg4tk/|offset|length|144390|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Niffler/514gg4tk/^0|0|0|0|0|0|9|11|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

As a basic example...

HTML:

<pre><code>&lt;input type="text" name="Thing" value="" /&gt;
</code></pre>

Script:

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

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

Here's a fiddle: <a href="http://jsfiddle.net/Niffler/514gg4tk/" rel="noreferrer">http://jsfiddle.net/Niffler/514gg4tk/</a>

blocks|key|2933416|text|实际上，勾选的答案是完全正确的，但答案可以是ES6形式的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2933417|HTMLInputElementObject.oninput+=+()+=>+{
++console.log('run');+//+Do+something
}|code-block|syntax|javascript|2933418|或者可以像下面这样写：|2933419|HTMLInputElementObject.addEventListener('input',+(evt)+=>+{
++console.log('run');+//+Do+something
});|2933420|entityMap^0|M|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Actually, the ticked answer is exactly right, but the answer can be in <code>ES6</code> shape:

<pre><code>HTMLInputElementObject.oninput = () =&gt; {
 console.log('run'); // Do something
}
</code></pre>

Or can be written like below:

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

blocks|key|2721087|text|默认用法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2721088|el.addEventListener('input',+function+()+{
++++fn();
});|code-block|syntax|javascript|2721089|但是，如果你想在通过JS手动更改输入值时触发事件，你应该使用自定义事件(任何名称，如'myEvent‘\+'ev’等)如果你需要监听表单的'+change‘或'input’事件，并且你通过JS改变了输入值--你可以将你的自定义事件命名为'change‘\+'input’，它也会起作用。|offset|length|style|BOLD|2721090|var+event+=+new+Event('input');
el.addEventListener('input',+function+()+{+
++fn();
});
form.addEventListener('input',+function+()+{+
++anotherFn();
});


el.value+=+'something';
el.dispatchEvent(input);|2721091|https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events|2721092|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2|0|0|0|2G|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@$I|10|J|11|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|P]]]]

Default usage

<pre><code>el.addEventListener('input', function () {
 fn();
});
</code></pre>

But, if you want to fire event when you change inputs value manualy via JS you should use custom event(any name, like 'myEvent' \ 'ev' etc.) IF you need to listen forms 'change' or 'input' event and you change inputs value via JS - you can name your custom event 'change' \ 'input' and it will work too.

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


el.value = 'something';
el.dispatchEvent(input);
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events</a>

blocks|key|146688|text|2021年的另一种方法可能是使用document.querySelector()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|146689|const+myInput+=+document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change",+(e)+=>+{
++//+here+we+do+something
});|code-block|syntax|javascript|146690|entityMap^0|G|O|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Another approach in 2021 could be using <code>document.querySelector()</code>:
<pre><code>const myInput = document.querySelector('input[name=&quot;exampleInput&quot;]');

myInput.addEventListener(&quot;change&quot;, (e) =&gt; {
 // here we do something
});
</code></pre>

blocks|key|2721131|text|Keydown、keyup、input是当输入发生变化时立即触发的事件，我会使用keydown或input事件从输入框中获取更改后的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2721132|const+myObject+=+document.getElementById('Your_element_id');
myObject.addEventListener('keydown',+function+(evt)+{
//+your+code+goes+here+
+console.log(myObject.value);
});|code-block|syntax|javascript|2721133|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Keydown, keyup, input are events that fire immediately when input changes,
I would use keydown or input events to get the changed value from the input box.
<pre><code>const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// your code goes here 
 console.log(myObject.value);
});
</code></pre>

blocks|key|2721127|text|每次用户输入一些值时，都要做一些事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2721128|var+element+=+document.getElementById('input');
element.addEventListener('input',+function()+{
+//+Do+something+
});|code-block|syntax|javascript|2721129|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Each time a user inputs some value, do something.
<pre><code>var element = document.getElementById('input');
element.addEventListener('input', function() {
 // Do something 
});
</code></pre>

blocks|key|143045|text|如果您想要监视每次键盘上的击键操作时的变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143046|const+textarea+=+document.querySelector(`#string`)
textarea.addEventListener("keydown",+(e)+=>{
+++console.log('test')+
})|code-block|syntax|javascript|143047|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you would like to monitor the changes each time there is a keystroke on the keyboard.
<pre><code>const textarea = document.querySelector(`#string`)
textarea.addEventListener(&quot;keydown&quot;, (e) =&gt;{
 console.log('test') 
})
</code></pre>

blocks|key|146692|text|另一个版本的Quentin的答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|146693|HTMLInputElementObject.addEventListener('input',+(e)+=>+{
++++//+Do+something+here...
});|code-block|syntax|javascript|146694|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/19068/quentin^0|6|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

A different version of <a href="https://stackoverflow.com/users/19068/quentin">Quentin</a>'s answer:
<pre><code>HTMLInputElementObject.addEventListener('input', (e) =&gt; {
 // Do something here...
});
</code></pre>

blocks|key|2933422|text|使用title而不是id来标识您的元素，并编写如下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2933423|$(document).ready(()=>{

+$("input[title='MyObject']").change(()=>{
++++++++console.log("Field+has+been+changed...")
++++})++
});|code-block|syntax|javascript|2933424|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

instead of id use title to identify your element and write the code as below.

<pre><code>$(document).ready(()=&gt;{

 $("input[title='MyObject']").change(()=&gt;{
 console.log("Field has been changed...")
 }) 
});
</code></pre>

Is there any way I can create a constant function that listens to an input, so when that input value changes, something is triggered immediately?

I am looking for something using pure javascript, no plugins, no frameworks and I can't edit the HTML.

Something, for example: 

When I change the value in the input <code>MyObject</code>, this function runs.

Any help?

Pure Javascript listen to input value change

有没有什么方法可以创建一个常量函数来监听输入，这样当输入值发生变化时，就会立即触发一些东西？我正在寻找一些使用纯javascript，没有插件，没有框架，我不能编辑的HTML。一些东西，例如：当我更改input MyObject**，中的值时，此函数将运行。**有什么帮助吗？

问纯Javascript监听输入值更改
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯Javascript监听输入值更改EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯Javascript监听输入值更改
EN