由于IE8以下的浏览器不支持placeholder。
然后通常解决浏览器兼容的问题都是两种思路嘛,一种就是平滑下降,去掉功能。另一种就是写一个(或者找一个)实现这个功能的库。
而因为交互的原因,使用placeholder后,如果删去,对网站的功能会造成很大的影响,所以也只好用写库代替的方法了。
一、首先是网上摘录的一个自动填写value的方法
$(function(){
handlePlaceholderForIE();
});
//原始从网上摘录的方法
function handlePlaceholderForIE() {
// placeholder attribute for ie7 & ie8
if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 9) {
// ie7&ie8
jQuery('input[placeholder], textarea[placeholder]').each(function () {
var input = jQuery(this);
jQuery(input).val(input.attr('placeholder'));
jQuery(input).focus(function () {
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
jQuery(input).blur(function () {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
}
然后这个方法会有缺陷,就是如果input是密码的话,则填写上去的内容会是两个小黑点
二、知乎的方法
记忆中,知乎的方法是在placeholder附近加上一个带文字的label,然后在密码的input中,使用label覆盖上去,代替value文字。根据这个思路,修改代码为:
//修改版后
function handlePlaceholderForIE() {
// placeholder attribute for ie7 & ie8
if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 9) {
// ie7&ie8
jQuery('input[placeholder], textarea[placeholder]').each(function () {
var input = jQuery(this);
if(input.attr("type") == "password"){
$("#txtPwd_l").show()
}else{
jQuery(input).val(input.attr('placeholder'));
}
jQuery(input).focus(function () {
if(input.attr("type") == "password"){
$("#txtPwd_l").hide();
}
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
jQuery(input).blur(function () {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
if(input.attr("type") == "password"){
$("#txtPwd_l").show()
}else{
input.val(input.attr('placeholder'));
}
}
});
});
}
}
//<input class="fxnloginnew" id="prePwd" style="background:#fff\0;" type="password" value="" placeholder="密码"><label id="txtPwd_l" style="display:none; position: absolute;top: 35px; left: 10px;color:#898989;">密码</label>
三、最终方法
然而为了使用方便,觉得可以写一个js,直接依靠js来生成label,这样就可以更加傻瓜的使用这个函数了。
//因此最终觉得可以写一个JS的插件
//然而因为我懒,还没有写出来,哈哈哈哈哈哈
//by 2015.8.12