jQuery实现HTML5 placeholder效果实例


Posted in Javascript onDecember 09, 2014

你一定知道 HTML5新增的 placeholder 属性吧?不知道的也没关系。输入框有默认文本是,常需要这样一个效果,点击让默认文本消失,失去焦点后让默认文本显示。

今天分享一段jQuery代码,模拟 placeholder 效果。

Javascript代码:

function placeHolder(event){

  var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();

  if(selfDataValue){

   event.type == "click" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))

  }else{

   return false;

  }

}

$(".pInputText").on("click blur",placeHolder);

Html代码:

<input type="text" value="在此处搜索" class="pInputText" />

可能有人会问了,既然html5都提供这样的功能,还有js写干嘛?

这不是废话吗,当然是以为兼容问题,IE要是对HTML5兼容好点的话,谁愿意用js去实现这玩意儿啊。

Javascript 相关文章推荐
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JS中递归函数
Jun 17 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
canvas绘制环形进度条
Feb 23 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
jQuery on方法传递参数示例
Dec 09 #Javascript
jquery实现侧边弹出的垂直导航
Dec 09 #Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 #Javascript
使用jQuery实现星级评分代码分享
Dec 09 #Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 #Javascript
浅谈JavaScript函数节流
Dec 09 #Javascript
node.js中的console.log方法使用说明
Dec 09 #Javascript
You might like
thinkphp模板用法和内容输出实例
2014/11/28 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
js树形控件脚本代码
2008/07/24 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
安全生产先进个人材料
2014/02/06 职场文书
数学检讨书1000字
2014/02/24 职场文书
干部作风建设心得体会
2014/10/22 职场文书
场地使用证明模板
2014/10/25 职场文书
2014年服务员工作总结
2014/11/18 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers