隐藏 div onfocus (1) - 芒果文档

📌 相关文章

📜 隐藏 div onfocus (1)

📅 最后修改于: 2023-12-03 15:42:25.009000 🧑 作者: Mango

隐藏 div onfocus

概述

在 web 开发中，有时候我们需要在用户输入数据之前，隐藏一些不必要或不合适的元素，以保持页面的整洁性和易用性。本篇文章介绍如何使用 onfocus 事件来实现在输入框获得焦点时隐藏指定的 div 元素。

步骤

在 HTML 中声明一个输入框和一个 div 元素

<input type="text" id="myInput">
<div id="myDiv">This is a div element.</div>

为输入框绑定 onfocus 事件

<input type="text" id="myInput" onfocus="hideDiv()">
<div id="myDiv">This is a div element.</div>

在 JavaScript 中定义 hideDiv() 函数，并在其中隐藏指定的 div 元素

function hideDiv() {
  document.getElementById("myDiv").style.display = "none";
}

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Hide div onfocus</title>
  <meta charset="UTF-8">
</head>
<body>
  <input type="text" id="myInput" onfocus="hideDiv()">
  <div id="myDiv">This is a div element.</div>
  <script>
    function hideDiv() {
      document.getElementById("myDiv").style.display = "none";
    }
  </script>
</body>
</html>

总结

使用 onfocus 事件可以轻松实现在输入框获得焦点时隐藏指定的 div 元素，提高页面的整洁性和易用性。需要注意的是，该事件只有在用户使用鼠标或键盘聚焦到输入框时才会触发，如果是通过代码自动聚焦，则无法触发该事件。