screenshots.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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");
        
        //文本框获得焦点时，如果文本框内容是默认的“请输入搜索关键字”，则清空文字内容并让文字由灰色变为黑色。
        txtSearch.onfocus = function(){
            if(this.value === '请输入搜索关键字'){
                this.value = '';
                this.className = "black";
            }
        };

        //文本框失去焦点时，如果文本框内容为空，将文本内容更改为“请输入搜索关键字”，并让文字颜色改为灰色。
        txtSearch.onblur = function(){
          //判断文本框内容是否为空，或内容为'请输入搜索关键字'
            if(this.value === '' || this.value == '请输入搜索关键字'){
                //将文本框内容更改为'请输入搜索关键字'
                this.value = "请输入搜索关键字";
                //将文本框的class更改为gray，文字颜色也会更改为灰色
                this.className = "gray";
            }
        };



    </script>


</body>
</html>