纯JavaScript监听输入值的变化。

Question

有没有办法我可以创建一个常量函数来监听输入，所以当输入值改变时，立即触发某些操作？

我正在寻找使用纯JavaScript的方法，不使用插件、框架，并且我不能编辑HTML。

类似于以下示例：

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

- gespinha

Answer 1

这就是事件的用途。

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

- Quentin

---

如果输入值被 JavaScript 改变，就无法正常工作。 - ImShogun

注意，typeof this.value 是一个字符串。如果需要一个数字，请使用 parseInt 或 parseFloat 进行转换。 - Akseli Palén

继续@ImShogun的评论。查看Azune-NK的答案，了解如何从JavaScript触发事件，如果您在那里更改值。非常有帮助。 - s3c

@ImShogun 这个答案似乎可以观察元素的属性，比如value： https://dev59.com/kFwY5IYBdhLWcg3wpJE-#61975440 - Damien Golding

我使用了 window.addEventListener('input', function (evt) { if() {} })。 - Leffa

你可以使用 this.valueAsNumber 来处理数字。 - Falling10fruit

Answer 2

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

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 + '"!');
}

这是一个 JSFiddle：http://jsfiddle.net/Niffler/514gg4tk/

- Niffler

---

如果输入内容被JavaScript更改，无论是使用'input'还是'change'事件，都不会起作用。 - ImShogun

当JavaScript更改值时，可以监听哪个事件？ - zero_cool

正如其他人所指出的那样，只有在你退出输入字段时才会触发。我知道这是一个旧答案了。但是这些回答出现得惊人地频繁，而且它们从未提到这些限制。 - Torxed

@ImShogun，有什么想法可以“支持”当输入通过JS更改的情况吗？ - Alessio

@ImShogun 这个回答似乎可以观察元素的属性，比如值： https://dev59.com/kFwY5IYBdhLWcg3wpJE-#61975440 - Damien Golding

@ImShogun 如果你的 JavaScript 能够引起变化，那么你的 JavaScript 也可以触发一个事件吗？$("#myElementId").val("new val"); $("#myElementId").trigger("change");
文档：https://api.jquery.com/trigger/. - undefined

Answer 3

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

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

或者可以像下面这样写：

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

- AmerllicA

Answer 4

默认用法

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

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

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


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

创建和触发事件

- Azune-NK

---

就是这样了！谢谢。element.dispatchEvent(new Event('change')) 是关键。手动 JS 更改没有触发事件，这一点不合常理，但突然之间却能成功了。让我感到有些愚蠢。 - s3c

Answer 5

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

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

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

- Runsis

---

@customcommander 感谢您的反馈。回答已经编辑！ - Runsis

Answer 6

HTML表单输入包含许多事件。请参考HTMLElement，在侧边栏中转到事件菜单并展开。您将看到许多有用的事件，如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键打开浏览器控制台并在那里查看结果。

- vee

Answer 7

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

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

- UserName Name

---

这个运行正常！ - Rohit Parte

Answer 8

Keydown、keyup和input是在输入内容更改时立即触发的事件。

我会使用keydown或input事件来获取输入框中更改后的值。

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

- Mitesh vaghela

Answer 9

在我看来，这只是将“onchange”误认为是“oninput”，而这两者是不同的。

- user1925191

Answer 10

如果您想要在键盘上每次按下按键时监视更改。

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

- Niso

---

这不会从粘贴中获取输入。 - Quentin

@Quentin，请问您能否看一下代码吗？ 我将代码放在以下链接中以方便查看：https://jsfiddle.net/niso/mdqf3geo/1/ 请务必在控制台中检查日志。 - Niso

我在7年前提供了我的代码。它是这个问题的被接受的答案！ - Quentin

只有在您输入到该字段时才会生效，如果您粘贴到该字段中则不会生效。 - Quentin

这正是我提供答案的内容。 - Niso