📌  相关文章
📜  HTML | onfocus 事件属性(1)

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

HTML | onfocus 事件属性

在 HTML 中，onfocus 事件属性可以在元素获取焦点时调用指定的 JavaScript 函数。

语法
<element onfocus="function()">

onfocus 事件属性应该被添加到希望在获取焦点时触发的元素上。其中 element 可以是任何 HTML 元素。

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

当该文本框获取焦点时，myFunction() 函数将被调用。

注意事项
  • onfocus 事件属性不能应用于所有 HTML 元素，但适用于大多数元素，如 <input>、<button>、<textarea>、<select>等；
  • onfocus 事件属性不仅仅适用于键盘操作，还适用于通过鼠标、触摸屏等设备的焦点操作；
  • onfocus 事件属性可以与其他事件配合使用，如 onblur、onchange 等；
  • onfocus 事件属性只能在 HTML 元素中添加，不能直接添加到 JavaScript 文件中。
更具体的示例
<!DOCTYPE html>
<html>
  <head>
    <title>onfocus 事件属性示例</title>
  </head>
  <body>
    <h2>onfocus 事件属性示例</h2>
    <p>
      在下面的文本框中输入内容，然后将鼠标从文本框移开，然后再将鼠标移到文本框上，看看发生了什么。
    </p>
    <input type="text" onfocus="bgChange(this)" onblur="bgChange(this)">
    <script>
      function bgChange(e) {
        if (e.value === "") {
          e.style.backgroundColor = "white";
        } else {
          e.style.backgroundColor = "lightgreen";
        }
      }
    </script>
  </body>
</html>

在上述示例中，我们定义了一个名为 bgChange 的函数，该函数根据文本框的值更改其背景颜色。我们将这个函数分别绑定到 onfocus 和 onblur 事件属性上，通过这种方式，使文本框的背景颜色根据焦点的状态发生变化，这将增强用户对焦点的感知。