JavaScript 如何检测文本框内容是否发生更改

任务是使用JavaScript检测文本框内容的变化。下面讨论了一些常见的方法。

方法1

我们将在输入元素中使用 onchange事件 并调用一个函数来观察效果。

示例: 在这个示例中，我们使用了上面解释的方法。

<!DOCTYPE html>
<html>
 
<head>
  <title>
    Detect If Textbox content has
    changed using pure JavaScript
  </title>
</head>
 
<body style="text-align:center;">
  <h1 style="color:green;">
    GeeksforGeeks
  </h1>
  <p>
    Change the text of input text
    and click outside of it to see.
  </p>
  <input id="input"
         name="input"
         onchange="GFG_Fun()" />
  <br>
  <br>
  <script>
    function GFG_Fun() {
      alert('Changed');
    }
  </script>
</body>
</html>

输出：

JavaScript 如何检测文本框内容是否发生更改

方法2

还有一些其他事件可以用来检测文本框内容的变化。使用其中的任意一个或全部。 onchange事件 ， onpropertychange事件 ， onkeyup事件 ， onpaste事件 ， oninput事件 ，并在输入元素中调用一个函数来查看效果。

示例： 在这个示例中，我们正在实现上述方法。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Detect If Textbox content has
        changed using pure JavaScript
    </title>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
    GeeksforGeeks
    </h1>
    <p>
    Change the text of input text and
    click outside of it to see.
    </p>
    <input id="input" name="input"
        onchange
        onpropertychange
        onkeyuponpaste oninput="GFG_Fun()" />
    <br>
    <br>
    <script>
        function GFG_Fun() {
            alert('Changed');
        }
    </script>
</body>
 
</html>

输出:

JavaScript 如何检测文本框内容是否发生更改

方法3

使用addEventListener()方法：在javascript中，通过使用addEventListener()方法，我们可以将输入的javascript事件附加到文本区域上。

示例： 在这个示例中，我们使用了上面解释的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    h1 {
      text-align: center;
    }
 
    .abc {
      display: flex;
      justify-content: center;
      text-align: center;
    }
  </style>
</head>
 
<body>
  <h1 style="color:green;">
    GeeksforGeeks
  </h1>
  <div class="abc">
    <input id="gfg">
  </div>
 
  <script>
    document.getElementById("gfg")
      .addEventListener("input", (event) => alert("Changed!"));
 
  </script>
</body>
</html>

输出：

JavaScript 如何检测文本框内容是否发生更改