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 相关文章推荐
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
react build 后打包发布总结
Aug 24 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 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 程序员的调试技术小结
2009/11/15 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
javascript  删除select中的所有option的实例
2017/09/17 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python集合类型用法分析
2015/04/08 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python2包含中文报错的解决方法
2018/07/09 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python numpy数组中的复制知识解析
2020/02/03 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
大学生创业计划书的格式要求
2013/12/29 职场文书
大学生村官事迹材料
2014/01/21 职场文书
护士进修自我鉴定
2014/02/07 职场文书
白酒市场营销方案
2014/02/25 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android