JS简例

本文最后更新于：2021年4月8日 下午

搜索栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
  <style>
    input {
      color: #999
    }
  </style>
</head>

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

  <script>
    // 1.获取元素
    var text = document.querySelector('input')
    // 2.注册事件 获得焦点事件 onfocus
    text.onfocus = function () {
      if (this.value === '手机') {
        this.value = ''
      }
      // 获得焦点需要把文本框里的颜色变深
      this.style.color = '#333'
    }
    // 3.注册事件 失去焦点事件 onblur
    text.onblur = function () {
      if (this.value === '') {
        this.value = '手机'
      }
      // 失去焦点需要把文本框里的颜色变深
      this.style.color = '#999'
    }
  </script>
</body>

</html>
web前端学习笔记
#front-end #JavaScript
web前端学习笔记6.5——JS简例
http://example.com/posts/7e41b4b8.html
作者
Fehek
发布于
2021年1月14日
许可协议