ThatManK Mobile Article

焦点事件

Category: JS Tutorial: DOM实战 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      input {
        color: #999;
      }
    </style>
  </head>

  <body>
    <input type="text" value="手机" />

    <script>
      // 1.获取元素
      var text = document.querySelector("input");

      // 2.注册事件 获得焦点事件 onfocus
      text.onfocus = function () {
        // console.log('得到了焦点');
        if (this.value === "手机") {
          this.value = "";
        }
        // 获得焦点需要把文本框里面的文字颜色变黑
        this.style.color = "#333";
      };

      // 3. 注册事件 失去焦点事件 onblur
      text.onblur = function () {
        // console.log('失去了焦点');
        if (this.value === "") {
          this.value = "手机";
        }
        // 失去焦点需要把文本框里面的文字颜色变浅色
        this.style.color = "#999";
      };
    </script>
  </body>
</html>