Html兼容性解决汇总

目录

  1. 1. input标签 placeholder 属性

input标签 placeholder 属性

placeholder属性是html5提供给 <input> 标签的新属性,用于提供输入内容预期的输入提示。

该属性在IE10以下不兼容,处理方法是使用js将placeholder的值取出放入input,并为input绑定处理获得焦点移除placeholder值和失去焦点填入placeholder的值的事件,具体实现如下:


/**
* 检查是否支持该属性,
* 经检查在火狐 v46 中'placeholder' in document.createElement('input')返回值为false,
* 而火狐是支持placeholder属性的,因此加入浏览器判断
*/
var isSupportPlaceholder = function() {
return navigator.userAgent.indexOf("MSIE") < 0 || 'placeholder' in document.createElement('input');
}

/**
* IE9下不支持placeholder的解决方案
*/
var fixPlaceholderInIE = function() {
if(!isSupportPlaceholder()){
$('input[placeholder]').each(function() {
var placeholderText = $(this).attr("placeholder");
if($(this).attr("type") == "text" && $(this).val() == ''){
$(this).val(placeholderText);
$(this).css("color", "#666");
}

/*
提供input focus和blur事件,
当input获得焦点,若input值等于placeholder则改为'',
当input失去焦点,将placeholder值放入input。
*/
$(this).focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
$(this).css("color", "#000");
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
$(this).css("color", "#666");
}
});
});
}
};
知识共享许可协议 知识共享许可协议 知识共享许可协议 本网站原创内容(非转载文章)采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。