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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
javascript变量声明实例分析
Apr 25 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
Vue.js常用指令的使用小结
Jun 23 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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 一个页面使用2次分页的实现方法
2013/07/15 PHP
xmlHTTP实例
2006/10/24 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Pygame框架实现飞机大战
2020/08/07 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
庆元旦广播稿
2014/02/10 职场文书
可口可乐广告词
2014/03/20 职场文书
七一党日活动总结
2014/07/08 职场文书
致青春观后感
2015/06/09 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers