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

当用户在文本框中输入内容后，我们如何检查这个文本框的内容是否已经更改了呢？以下是一些用于检测文本框内容是否已更改的 JavaScript 技巧。

通过 onchange 事件监听文本框内容的更改

可以通过为文本框添加 onchange 事件监听器来检测文本框内容的更改。以下是示例代码：

let input = document.querySelector('input');

input.addEventListener('change', function() {
  console.log('输入框的内容已更改。');
});

当用户更改文本框中的内容时，事件监听器将执行回调函数，从而让我们知道输入框的内容已更改。

通过 oninput 事件实时监听文本框内容的更改

使用 onchange 事件虽然可以检测文本框的内容是否已更改，但是它只有在文本框失去焦点时才会触发。如果我们想要实时监听文本框的内容更改，我们可以使用 oninput 事件。下面是示例代码：

let input = document.querySelector('input');

input.addEventListener('input', function() {
  console.log('输入框的内容已更改。');
});

当用户在输入框中输入或删除字符时，事件监听器将实时触发回调函数，并让我们知道文本框的内容已更改。

监测文本框内容是否为空

在程序中经常需要检查文本框是否为空，以下是 JavaScript 代码，可用于检查文本框内容是否为空：

let input = document.querySelector('input');

if (input.value.trim() === '') {
  // 文本框内容为空
} else {
  // 文本框内容不为空
}

我们可以使用 trim() 方法来删除字符串两端的空格，然后检查是否存在任何字符。

结论

以上是一些用于检测文本框内容是否已更改的 JavaScript 技巧。可以使用 onchange 事件和 oninput 事件来检测文本框内容的更改，而使用 trim() 方法来检查文本框是否为空。