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实现简单的购物车有图有代码
May 26 Javascript
jQuery.each使用详解
Jul 07 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
vuex入门最详细整理
Mar 04 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
索趣科技的答案
2007/02/07 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Pandas之缺失数据的实现
2021/01/06 Python
英国航空官网:British Airways
2016/09/11 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
学习经验演讲稿
2014/05/10 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers