jQuery实现HTML5 placeholder效果实例
更新时间：2014年12月09日 10:45:09 投稿：junjie
这篇文章主要介绍了jQuery实现HTML5 placeholder效果实例,本文目的主要是在需要兼容一些浏览器时使用,需要的朋友可以参考下
你一定知道 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去实现这玩意儿啊。
您可能感兴趣的文章:
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
- IE下支持文本框和密码框placeholder效果的JQuery插件分享
- 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
- jQuery实现的一个自定义Placeholder属性插件
- jQuery实现的placeholder效果完整实例
- jQuery插件EnPlaceholder实现输入框提示文字
- jquery实现（textarea）placeholder自动换行
- jquery 判断是否支持Placeholder属性的方法
- jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
- jQuery实现IE输入框完成placeholder标签功能的方法
相关文章
如果你用过ASP.NET的数据绑定控件，也用过ASP或者JSP里那种通过输出HTML元素在页面上显示数据的方法，你就知道ASP.NET数据绑定控件有多么方便。如果能够将同样的功能在浏览器端用HTML和JavaScript实现，那该是多少美妙的事情。2010-05-05
jquery ajax对特殊字符进行转义防止js注入使用示例
如果有人在留言里写入了js语句,这结语句都会被执行.解决办法就是对这些特殊字符进行转义再显示出来，下面有个不错的示例，感兴趣的朋友可以参考下2013-11-11
这篇文章主要介绍了jQuery源码解读之hasClass()方法,以注释形式较为详细的分析了hasClass()方法的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了使用jQuery或者原生js实现鼠标滚动加载页面新数据的方法,即控制滚动条下拉时的加载事件,需要的朋友可以参考下2016-03-03
本文给大家分享的是一个使用jQuery插件windowScroll实现的单屏滚动的特效，主要参考搜狗浏览器4.2版本首页的上下滚动效果。主要实现整个窗口的上下和左右滚动逻辑，非常的实用。2015-07-07
这篇文章主要介绍了ajax的分页查询示例（不刷新页面），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
元素选择是一切操作的前提，jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。2017-02-02
简易验证插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各浏览器，附自用版本供下载2014-01-01
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
使用jquery的ajax，轻松从纯真网(cz88.net)获取IP地址对应地区名2009-12-12
这篇文章主要介绍了jquery实现图片水平滚动效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
最新评论