纯 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
});

默认用法

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

但是，如果你想在通过JavaScript手动更改输入值时触发事件，你应该使用自定义事件（任何名称，如'myEvent'、'ev'等）。如果您需要侦听表单"更改"或"输入"事件，并且通过JavaScript更改输入值，则可以将自定义事件命名为"更改"或"输入"，它也可以工作。

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

el.value = 'something';
el.dispatchEvent(event);

创建和触发事件

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

const myInput = document.querySelector('input[name="exampleInput"]');
myInput.addEventListener("change", (e) => {
  // here we do something
});

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

iput change

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

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

剪切、复制和粘贴

剪切（键盘快捷键上的 CTRL + X）输入值时，将触发cut、beforeinput input事件。复制（键盘快捷方式上的 CTRL+C）时，将单独触发 copy 事件。

从剪贴板粘贴值（键盘快捷键上的 Ctrl + V）时，将触发paste、beforeinput input事件。

JavaScript 更改值

要通过 JavaScript 更改输入值并使重要事件正常工作，您需要按顺序至少调度两个事件。一个是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 打开浏览器的控制台并在那里查看结果。

每次用户输入某个值时，请执行某些操作。

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

我直言，这只是"onchange"被误认为是"oninput"，这是两回事。

键下、键和输入是在输入更改时立即触发的事件。

我会使用键下或输入事件从输入框中获取更改的值。

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

每次键盘上击键时监视更改。

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

而不是 id，使用 title 来标识您的元素并编写如下代码。

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