注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

牧野流星

每个人心中都有一个梦想..........

 
 
 

日志

 
 

IE下实现placeholder效果,支持文本框和密码框(转载)  

2014-06-24 11:47:12|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失。

下载地址:http://download.csdn.net/detail/cwqcwk1/5676563(含demo)

实现代码如下:

(function($) {
var placeholderfriend = {

focus: function(s) {

s = $(s).hide().prev().show().focus();

var idValue = s.attr("id");

if (idValue) {

s.attr("id", idValue.replace("placeholderfriend", ""));

}

var clsValue = s.attr("class");

if (clsValue) {

s.attr("class", clsValue.replace("placeholderfriend", ""));

}

}

}



//判断是否支持placeholder

function isPlaceholer() {

var input = document.createElement('input');

return "placeholder" in input;

}

//不支持的代码

if (!isPlaceholer()) {

$(function() {



var form = $(this);



//遍历所有文本框,添加placeholder模拟事件

var elements = form.find("input[type='text'][placeholder]");

elements.each(function() {

var s = $(this);
s.css("color","#ccc");

var pValue = s.attr("placeholder");

var sValue = s.val();

if (pValue) {

if (sValue == '') {

s.val(pValue);

}

}

});



elements.focus(function() {

var s = $(this);

var pValue = s.attr("placeholder");

var sValue = s.val();

if (sValue && pValue) {

if (sValue == pValue) {

s.val('');

}

}

});

elements.blur(function() {

var s = $(this);

var pValue = s.attr("placeholder");

var sValue = s.val();

if (!sValue) {

s.val(pValue);
s.css("color","#ccc");
}

});

//遍历所有密码框,添加placeholder模拟事件
var elementsPass = form.find("input[type='password'][placeholder]");
elementsPass.each(function(i) {

var s = $(this);
s.css("color","#ccc");
var pValue = s.attr("placeholder");

var sValue = s.val();

if (pValue) {

if (sValue == '') {

//DOM不支持type的修改,需要复制密码框属性,生成新的DOM

var html = this.outerHTML || "";

html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend")

.replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")

.replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue

+ "' " + "onfocus='placeholderfriendfocus(this);' ");

var idValue = s.attr("id");

if (idValue) {

s.attr("id", idValue + "placeholderfriend");

}

var clsValue = s.attr("class");

if (clsValue) {

s.attr("class", clsValue + "placeholderfriend");

}

s.hide();

s.after(html);

}

}

});



elementsPass.blur(function() {

var s = $(this);

var sValue = s.val();

if (sValue == '') {

var idValue = s.attr("id");

if (idValue) {

s.attr("id", idValue + "placeholderfriend");

}

var clsValue = s.attr("class");

if (clsValue) {

s.attr("class", clsValue + "placeholderfriend");

}
s.hide().next().show();
}
});
});
}
window.placeholderfriendfocus = placeholderfriend.focus;
$("input").keydown(function(){
$(this).css("color","#000");
});
})(jQuery);


使用很简单,例子如下:

<html>  

<head>  

<script src="jquery.js" type="text/javascript"></script>  

<script src="placeholderfriend.js" type="text/javascript"></script>  

</head>  

<body>  

<input placeholder="账号/手机号码" ><br>  

<input placeholder="密码" type="password" >  

</body>  

</html>  

  评论这张
 
阅读(64)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018