jQuery实现IE输入框完成占位符标签功能的方法

本文的一个例子讲述了jQuery如何在IE输入框中实现占位符标签的功能。分享给大家参考，如下：

如果将占位符='xx '属性添加到输入框，例如：

输入类型='text '占位符='请输入关键字'/，可以实现在Google浏览器等高级浏览器的输入框中替换文本的功能，即得到如下图所示的对话框：

但是，这个属性与WIN7的默认浏览器IE8不兼容，更不用说IE6了。也就是说，IE中不支持标签占位符。

不信的话，可以把这段代码拉进IE8运行。你只得到一个空的对话框

要在IE中实现这一点，您应该使用组件来丢失焦点模糊并获得焦点聚焦。详情请参考《JavaScript组件焦点与页内锚点间传值的方法》

事实上，jQuery可以完全消除。这里用这个来复习《jQuery通过控制节点实现仅在前台通过get方法完成参数传递》。

想法很简单。首先，此文本框默认为#cccccc灰色字体，值为“请输入关键词”。获得焦点后，将其颜色设置为#000000黑色，该值为空。一旦失去焦点，如果值为空，立即恢复为默认的#cccccc灰色字体，值为“请输入关键字”

代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /title搜索输入框替换文本/title脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 11 . 1 . js '/script/headsdyform id=' test '输入id=' searchkeyword '类型=' text' maxlength=' 30 '值='请输入关键字' style=' color : # cccccc '/form/body/html script type=' text/JavaScript ' $(文档ready(function(){ var is tisnull=true；$ ('# searchkeyword ')。focus (function () {if ($ (this))。val ()=='请输入关键字' is is null){ $(this)。val(“”)；$(这个)。attr('style '，' color : # 000000 ')；isthisnull=false} });$ ('# searchkeyword ')。blur (function () {if ($ (this))。val ()=='') {$ (this)。val('请输入关键字')；$(这个)。attr('style '，' color : # cccccc ')；isthisnull=true} });});/script这里要注意的是，增加了一个布尔值isthisnull来判断是否为空，以此来判断用户是否要输入“请输入关键词”。

不能认为文本框中的“请输入关键词”为空。如果用户输入“请输入关键词”怎么办？

这里不应该用jquery或者javascript来判断颜色或者样式的值是“#cccccc”还是“color: # cccccc”，因为用的是$(this)。css('color ')获取颜色，没有浏览器输出结果会不一样，而且ie会认为它是一个对象，而不是字符串。

设置isthisnull也可以为以后的进一步表单验证做准备

最后，在工业工程中获得了以下效果：

更多对jQuery感兴趣的读者可以查看本网站主题：《jQuery页面元素操作技巧汇总》、《jquery选择器用法总结》、《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、0103010

希望本文对大家的jQuery程序设计有所帮助。