JavaScript onblur与onfocus事件详解

编程基础网 Java开发

2023-12-06

onblur和onfocus是JavaScript中的两个常见的事件。在本文中，我们将详细讲解这两个事件的定义、用法和示例。

JavaScript onblur 与 onfocus 事件详解

onblur和onfocus是JavaScript中的两个常见的事件。在本文中，我们将详细讲解这两个事件的定义、用法和示例。

`onblur`事件

onblur事件会在当前元素失去焦点时触发，例如当用户从一个文本框中切换到另一个控件时，或者点击任何区域以使控件失去焦点时。下面是一个示例：

<input type="text" onblur="myFunction()">

在上面的示例中，当文本框失去焦点时，myFunction()函数将被调用。

下面是一个更完整的示例，通过使用addEventListener方法将事件处理程序添加到元素中：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">

<script>
document.getElementById("myInput").addEventListener("blur", function() {
  alert("Input field lost focus.");
});
</script>

</body>
</html>

在上面的示例中，当文本框失去焦点时，弹出一个警告框。

`onfocus`事件

onfocus事件会在当前元素获得焦点时触发，例如当用户单击一个文本框时，或者使用Tab键将焦点移到控件上时。下面是一个示例：

<input type="text" onfocus="myFunction()">

在上面的示例中，当文本框获得焦点时，myFunction()函数将被调用。

下面是一个更完整的示例，通过使用addEventListener方法将事件处理程序添加到元素中：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">

<script>
document.getElementById("myInput").addEventListener("focus", function() {
  document.getElementById("myInput").style.backgroundColor = "yellow";
});
</script>

</body>
</html>

在上面的示例中，当文本框获得焦点时，将背景颜色设置为黄色。