使用jQuery快速解决IE9以下浏览器无法支持input的placeholder属性的问题
placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性，效果表现为当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。
要如何解决ie9以下浏览器无法支持的问题呢，可参考天下手游官网： http://tx.163.com/index.html
大概的代码如下：
<form method="post" class="ios_form">
<input type="text" class="text urs-id" placeholder="网易通行证"/>
<input type="text" class="text phone-num" placeholder="手机号码" maxlength="11"/>
<input type="text" class="text code" placeholder="输入验证码" maxlength="6"/>
<a href="javascript:;" class="code-img" id="getIosCode">获取验证码</a>
<a href="javascript:;" class="submitBtn">提交</a>
</form>
var Placeholer = function(){
//判断是否支持placeholder
function isPlaceholer() {
return 'placeholder' in document.createElement('input');
}
//取位置和宽高
function getOffset($obj) {
var offset = $obj.offset();
return {
left: $obj.position().left,
top: $obj.position().top,
wid: $obj.width(),
hei: $obj.height()
}
}
$.fn.extend({
placeholder: function() {
if (!isPlaceholer()) {
$(this).each(function(index, elem) {
var $input = $(elem),
$label =$('<label class="labelPlaceholder labelPlaceholder' +(index+1)+ '">' + $input.attr('placeholder') + '</label>'),
offset = getOffset($input),
styleParams = {
'width': offset.wid,
'height': offset.hei,
'position': 'absolute',
'left': offset.left,
'top': offset.top
};
if($input[0].nodeName === 'INPUT'){
styleParams.lineHeight = offset.hei + 'px';
var _index = $input.index('input')+1,
_className = '.labelPlaceholder'+_index;
}else{
var _index = $input.index('textarea')+1,
_className = 'labelTextAreaPlaceholder'+_index;
$label.addClass(_className);
_className = '.' + _className;
}
$input.parent().find(_className).remove();
$input.after($label);
$label.css(styleParams);
if ($input.val() != '') {
$label.hide();
}
$label.click(function() {
$input.focus();
})
$input.on('input propertychange', function() {
if ($(this) .val() == '') {
$label.show();
} else {
$label.hide();
}
}).on('blur', function() {
if ($(this).val() == "") {
$label.show();
}
})
});
}
}
})
}();
$('.ios_form input').Placeholer();
手机阅读请扫描下方二维码：
上一篇：关于移动端垂直居中对齐的几个方法
下一篇：React学习笔记
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1