<!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>