jQuery实现的占位符效果完整实例

本文实例讲述了jQuery实现的占位符效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejQuery实现占位符效果/title脚本src=' http : jquery-1。7 .2 .量滴js '/script script $(function(){ initEvent()；});//初始化提示内容的颜色函数initEvent() { $('input.holder ').每个（函数(){ var $this=$(this)，holder=$ this。数据('持有者')；if (holder) { $this.css('color '，' #a9a9a9 ').val(持有人);} });//获取焦点时设置内容的颜色和值为空$(文档)。关闭(“焦点”，“输入. holder”).on('focus '，' input.holder '，function(){ var $ this=$(this)；if($这个。val()===$ this。数据(' holder '){ $ this。CSS('颜色'，'黑色').val(" ")；} });//失去焦点后还原提示内容$(文档)。off('focusout '，' input.holder ').on('focusout '，' input.holder '，function(){ var $ this=$(this)；if ($ .trim($这个。val())===' '){ $ this。CSS(' color '，' # a9a9a9 ').瓦尔(这个。数据('持有者')；} });}/脚本/床头输入类型=' text ' class=' holder ' name=' name ' value=' data-holder='请输入账户/brbr输入类型=' text ' class=' holder ' name=' name ' value=' data-holder='请输入密码//正文/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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