下载掌阅APP，畅读海量书库
立即打开
1.22 提示文本的隐藏与显示
网页搜索功能已经成了所有网站的标配，几乎每一件不确定、待确认的事情都离不开搜索引擎的帮助。不知道用户有没有特别留意过搜索框的风格样式，大多数的搜索框内会留有一个默认的灰色提示文本，当搜索框获得焦点时，提示文本会自动隐藏。而当鼠标焦点离开时又会恢复默认提示文本。本例效果如图1.30与图1.31所示。
图1.30 搜索文本框未获得焦点
图1.31 搜索文本框获得焦点后
本例主要代码如下：
本例的关键代码是第05~15行。其中，focus()函数与blur()函数分别实现了文本的显示与隐藏。
第05~09行中的focus()函数描述当元素获得焦点时发生的事件，其语法如下：
其中，参数function为可选项，规定当发生focus事件时运行的函数。
第10~15行中的blur()函数描述当元素失去焦点时发生的事件，其语法如下：
其中，参数function为可选项，规定当发生blur事件时运行的函数。
需要用户特别注意的有以下3点：
● 当鼠标单击选中元素或通过Tab键定位到元素时，该元素就会获得焦点。
● blur()无参函数同样可以触发blur事件；如果设置了function参数，该函数也可规定当发生blur事件时执行的代码。
● 早期浏览器中的blur事件仅发生于表单元素上，而当今流行的浏览器中，该事件可用于任何HTML元素。