通常的设计形式，我们会添加一些文本，例如在搜索框中，我们会提示输入关键词，在搜索框中得到焦点并失去焦点，当隐藏和显示时，最常用的方法是使用值来设置：
复制代码代码如下所示：


搜索


document.getelementbyid（关键词）。Onfocus =函数（）{
如果（document.getelementbyid（关键词）。值= =请输入关键词）{
document.getelementbyid（关键词）价值= ；
}
}
document.getelementbyid（关键词）。Onblur =函数（）{
如果（document.getelementbyid（关键词）{。值= = ）
document.getelementbyid（关键词）。值=请输入关键词；
}
}
document.getelementbyid（搜索）。Onsubmit =函数（）{
var关键字= document.getelementbyid（关键词）的价值；
如果（关键词= = = =关键词| |请输入关键词）{
警报（请输入密钥）；
返回false；
}
返回true；
}


所以虽然我们想要实现代码功能，但是原因是不干净的，请输入关键字，这篇文章只是文本，但没有价值，虽然没有重大的技术问题，但大部分时间还是有麻烦的，例如，我们可能喜欢提示文字显示颜色是灰色的，而文本的用户类型是黑色显示的。
下面是一个如何使用CSS的更好的方法：
复制代码代码如下所示：

#包装{位置：相对；显示：内联；}
#描述{位置：绝对；左：1px；颜色：# 999999；显示：无；}



请输入关键字


搜索


在window.onload =函数（）{
如果（！document.getelementbyid（关键词）。值）{
document.getelementbyid（说明）。style.display =内联；
}
}；
document.getelementbyid（关键词）。Onfocus =函数（）{
如果（！document.getelementbyid（关键词）。值）{
document.getelementbyid（说明）。style.display =没有；
}
}
document.getelementbyid（关键词）。Onblur =函数（）{
如果（！document.getelementbyid（关键词）。值）{
document.getelementbyid（说明）。style.display =内联；
}
}
document.getelementbyid（搜索）。Onsubmit =函数（）{
如果（！document.getelementbyid（关键词）。值）{
警报（请输入密钥）；
返回false；
}
返回true；
}


虽然这种方式实施CSS，JS代码是多了一些，但更合理的结构，通过引入标签显示文本提示（通过CSS定位属性的定位），价值本身更简单，并提示文本和样式中用户输入的文本更容易控制，如颜色的深度，从而提高可用的形式。