纯 Javascript 监听输入值的变化

这就是 事件的作用。

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

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

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/

实际上，打勾的答案是完全正确的，但答案可以是 ES6形式:

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

或者可以这样写:

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

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

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


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

默认用法

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(event);

Https://developer.mozilla.org/en-us/docs/web/guide/events/creating_and_triggering_events

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

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


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

如果您想监视每次键盘上有一个按键时的更改。

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

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

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

键控、键控、输入是在输入更改时立即触发的事件, 我将使用 keydown 或 input 事件从输入框中获得更改后的值。

const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// your code goes here
console.log(myObject.value);
});

这听起来和我的问题一模一样。 我也会问同样的问题，但我想这是同样的错误问题..。 恕我直言，它只是“ onchange”被误认为“ oninput”，这是两个不同的概念。 给我一个很大的负数为这个声明，我不在乎，但我想它可能会帮助其中一个或另一个..。

HTML 表单输入包含许多事件。从 MDN 文件引用，在侧边栏转到 活动菜单并展开它。您将看到许多有用的事件，如 beforeinput、 change、 copy、 cut、 input、 paste和拖放事件。

iput & change.

键入表单输入值时，按顺序触发 beforeinput和 input事件。

当表单输入值发生更改并且您失去了对该输入的关注时，将触发 change事件。

剪切，复制，粘贴。

当你切换输入值(快捷键为 CTRL + X)时，会触发 cut、 beforeinput、 input事件。
当你复制(快捷键上的 CTRL + C)时，只触发 copy事件。
当你粘贴剪贴板上的值时(在快捷键上为 CTRL + V) ，就会触发 paste、 beforeinput、 input事件。

JS 更改值。

要通过 JavaScript 更改输入值并使重要事件正常工作，您需要按顺序分派至少2个事件。一个是 input，两个是 change。这样您就可以将代码集中到收听 input或 change事件。这样比较容易。

下面是所有的示例代码。

(() => {
let inputText = document.getElementById('text');
let submitBtn = document.getElementById('submit');
let triggerJSBtn = document.getElementById('button');


submitBtn.addEventListener('click', (event) => {
event.preventDefault(); // just prevent form submitted.
});


triggerJSBtn.addEventListener('click', (event) => {
const thisTarget = event.target;
event.preventDefault();
inputText.value = thisTarget.innerText;
inputText.dispatchEvent(new Event('input'));
inputText.dispatchEvent(new Event('change'));
});


inputText.addEventListener('beforeinput', (event) => {
const thisTarget = event.target;
console.log('beforeinput event. (%s)', thisTarget.value);
});


inputText.addEventListener('input', (event) => {
const thisTarget = event.target;
console.log('input event. (%s)', thisTarget.value);
});


inputText.addEventListener('change', (event) => {
const thisTarget = event.target;
console.log('change event. (%s)', thisTarget.value);
});


inputText.addEventListener('cut', (event) => {
const thisTarget = event.target;
console.log('cut event. (%s)', thisTarget.value);
});


inputText.addEventListener('copy', (event) => {
const thisTarget = event.target;
console.log('copy event. (%s)', thisTarget.value);
});


inputText.addEventListener('paste', (event) => {
const thisTarget = event.target;
console.log('paste event. (%s)', thisTarget.value);
});
})();

/* for beautification only */


code {
color: rgb(200, 140, 50);
}


small {
color: rgb(150, 150, 150);
}

<form id="form">
<p>
Text: <input id="text" type="text" name="text">
</p>
<p>
Text 2: <input id="text2" type="text" name="text2"><br>
<small>(For lost focus after modified first input text so the <code>change</code> event will be triggered.)</small>
</p>
<p>
<button id="submit" type="submit">
Submit
</button>
<button id="button" type="button">
Trigger JS to set input value.
</button>
</p>
<p>Press F12 to view results in your browser console.</p>
</form>

请按 F12打开浏览器控制台并查看结果。