在HTML 5中，通过“search”类型可以实现一个搜索域，比如站点搜索或Google搜索、百度搜索。“search”域显示为常规的文本域。“search”类型的<input>元素专门用于关键字的查询，该类型的输入框与“text”类型的输入框在功能上没有太大的区别，都是用于接收用户输入的查询关键字。但是在页面展示时却有少许的区别。在Chrome与Safari浏览器中，在输入框中填写内容时，输入框的右侧将会出现一个“×”按钮，单击该按钮时会清空在输入框中的内容。
下面通过一个实例讲解显示文本框中的搜索关键字的方法。
在本实例的表单中，增加了一个“search”类型的<input>元素，功能是用于输入查询关键字。然后为此表单增加一个“提交”按钮，当单击按钮时显示输入的关键字内容。实例文件6.html的代码如下。
在上述代码中，在表单提交时为了获取“search”类型的<input>输入框的值，在表单的“onSubmit”事件中，调用了一个JavaScript自定义函数ShowKeyWord（）。在自定义函数ShowKeyWord（）中，先获取查询输入框的值，然后将该值设置为展示元素<p>的内容，并通过“retum false”方法终止表单提交的过程，最后显示该函数执行结果。
上述代码调用了脚本文件js6.js，此文件的代码如下。
执行效果如图4-8所示。在文本框中输入关键字，单击“提交”按钮后将在下方显示输入的关键字，如图4-9所示。
(www.xing528.com)
图4-8 执行效果
图4-9 显示输入的关键字
在Chrome与Safari浏览器中，在输入框中填写内容时，输入框的右侧将会出现一个“×”按钮，如图4-10所示。当单击“×”按钮时会清空在输入框中的内容，如图4-11所示。
图4-10 显示“×”
图4-11 清空文字
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
