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 26 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
jquery队列函数用法实例
Dec 16 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 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应用程序的七个习惯深入分析
2013/06/08 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
Python入门篇之字符串
2014/10/17 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
深入理解python函数递归和生成器
2016/06/06 Python
python制作websocket服务器实例分享
2016/11/20 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
Java里面如何创建一个内部类的实例
2015/01/19 面试题
董事长秘书岗位职责
2013/11/29 职场文书
村创先争优活动总结
2014/08/28 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
python - asyncio异步编程
2021/04/06 Python
Redis如何一键部署脚本
2021/04/12 Redis
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技