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事件串连执行多个处理过程的方法
Mar 09 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
jquery 上下滚动广告
Jun 17 Javascript
javascript 节点排序 2
Jan 31 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JS实现贪吃蛇游戏
Nov 15 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实现redis数据库指定库号迁移的方法
2015/01/14 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
Javascript window对象详解
2014/11/12 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
Python栈类实例分析
2015/06/15 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python地图绘制实操详解
2019/03/04 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
法人代表任命书范本
2014/06/05 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
《折线统计图》教学反思
2016/02/22 职场文书