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树形控件脚本代码
Jul 24 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
es6函数中的作用域实例分析
Apr 18 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
详解PHP编码转换函数应用技巧
2016/10/22 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
理解AngularJs指令
2015/12/10 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
详解python基础之while循环及if判断
2017/08/24 Python
python实现简单神经网络算法
2018/03/10 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python处理csv中的空值方法
2018/06/22 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python归并排序算法过程实例讲解
2020/11/04 Python
大学生个人简历中的自我评价
2013/12/27 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
部队个人年终总结
2015/03/02 职场文书
社区党支部承诺书
2015/04/29 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
二婚主持词
2015/06/30 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript