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|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>

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|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|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|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>

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯Javascript监听输入值更改EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯Javascript监听输入值更改
EN