js input onchange

作者：烟寂断魂发布日期:2025-05-01 浏览:50

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Input onchange Example</h2>

<p>The onchange event occurs when the value of an element has been changed.</p>

<form>
  <label for="fname">Enter your name:</label><br><br>
  <input type="text" id="fname" name="fname" onchange="myFunction()">
</form>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "You entered: " + document.getElementById("fname").value;
}
</script>

</body>
</html>

解释说明：

HTML部分：创建了一个简单的表单，包含一个文本输入框 (<input type="text">) 和一个段落元素 (<p>)，用于显示用户输入的内容。
onchange事件：当用户在输入框中输入内容并移开焦点（例如点击其他地方或按Tab键）时，触发onchange事件，调用myFunction()函数。
JavaScript部分：定义了myFunction()函数，该函数获取用户在输入框中输入的值，并将其显示在页面上的<p>元素中。

这个示例展示了如何使用onchange事件来响应用户对输入框的更改。

上一篇：js beforeunload

下一篇：js onclick事件