手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现HTML5 placeholder效果实例
jQuery实现HTML5 placeholder效果实例
摘要:你一定知道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="在此处搜索" />

可能有人会问了,既然html5都提供这样的功能,还有js写干嘛?

这不是废话吗,当然是以为兼容问题,IE要是对HTML5兼容好点的话,谁愿意用js去实现这玩意儿啊。

【jQuery实现HTML5 placeholder效果实例】相关文章:

JQuery中节点遍历方法实例

JS+CSS实现的拖动分页效果实例

jQuery实现限制textarea文本框输入字符数量的方法

实现placeholder效果的方案汇总

JQuery实现带排序功能的权限选择实例

jQuery实现表格行上下移动和置顶效果

JQuery球队选择实例

jQuery插件pagewalkthrough实现引导页效果

js实现精美的图片跟随鼠标效果实例

jquery使用each方法遍历json格式数据实例

精品推荐
分类导航