九门宁生

导航

文本框的灰字设置 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .gray {
      color: gray;
    }

    .black {
      color: black;
    }
  </style>
</head>
<body>
  <input type="text" class="gray" value="请输入搜索关键字" id="txtSearch"> 
  <input type="button" value="搜索" id="btnSearch">
  <script>
    // 当文本框获得焦点，如果文本框里的内容是  请输入搜索关键字 清空文本框，并且让字体变为黑色
    
    var txtSearch = document.getElementById('txtSearch');
    // 获取焦点的事件  focus
    txtSearch.onfocus = function () {
      if (this.value === '请输入搜索关键字') {
        this.value = '';
        this.className = 'black';
      }
    }

    // 当文本框失去焦点，如果文本框里的内容为空  还原文本框里的文字，并且让字体变为灰色
    // 失去焦点的事件  blur
    txtSearch.onblur = function () {
      // 判断文本框中的内容为空
      // if (this.value === '')
      if (this.value.length === 0 || this.value === '请输入搜索关键字') {
        this.value = '请输入搜索关键字';
        this.className = 'gray';
      }
    }



  </script>
</body>
</html>

 

posted on 2019-08-23 15:12  九门宁生  阅读(541)  评论(0)    收藏  举报