如何使用 JavaScript 检测文本框内容是否已更改？

在 Web 开发中，我们经常需要检测用户对输入文本框的更改，然后进行相应的操作。本文介绍如何使用 JavaScript 来检测文本框内容是否已更改。

使用 onchange 事件

使用 onchange 事件是最基本的方法。当用户修改文本框中的内容并将焦点移出文本框时，onchange 事件将会触发。

<input type="text" id="myInput" onchange="myFunction()">

使用 JavaScript 调用该函数：

function myFunction() {
  console.log("文本框内容已更改！");
}

使用 oninput 事件

oninput 事件比 onchange 事件更加实用。当文本框中的内容发生任何更改时，oninput 事件都会被触发。这意味着不需要等到焦点移出文本框才会被触发。

<input type="text" id="myInput" oninput="myFunction()">

JavaScript 函数代码：

function myFunction() {
  console.log("文本框内容已更改！");
}

检测文本框内容是否更改

有时候，我们只需要在用户修改了文本框的内容后才执行某些操作。为了检测文本框内容是否更改，可以使用一个变量来存储原始文本框的值，并使用 oninput 事件来检测文本框内容是否与原始值不同。

<input type="text" id="myInput" oninput="checkChanges()">

JavaScript 函数代码：

let originalValue = document.getElementById('myInput').value;

function checkChanges() {
  let inputValue = document.getElementById('myInput').value;
  if (inputValue !== originalValue) {
    console.log("文本框内容已更改！");
    // 执行其他操作
  }
}

结论

本文介绍了如何使用 JavaScript 来检测文本框内容是否已更改。我们可以使用 onchange 和 oninput 事件来检测用户对文本框的输入。当需要在用户修改了文本框内容后才执行某些操作时，可以使用一个变量来存储原始文本框的值，并使用 oninput 事件来检测文本框内容是否与原始值不同。