IE8 不支持html5 placeholder的解决方案

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

IE8不支持html5 placeholder的解决方法。

/**
* jQuery EnPlaceholder plug
* version 1.0 2014.07.01戈志刚
* by Frans.Lee <dmon@foxmail.com> http://www.ifrans.cn
*/
(function ($) {
$.fn.extend({
"iePlaceholder":function (options) {
options = $.extend({
placeholderColor:'#999',
isUseSpan:true,
onInput:true
}, options); $(this).each(function () {
var _this = this;
var supportPlaceholder = 'placeholder' in document.createElement('input');
if (!supportPlaceholder) {
var defaultValue = $(_this).attr('placeholder');
var defaultColor = $(_this).css('color');
if (options.isUseSpan == false) {
$(_this).focus(function () {
var pattern = new RegExp("^" + defaultValue + "$|^$");
pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
}).blur(function () {
if ($(_this).val() == defaultValue) {
$(_this).css('color', defaultColor);
} else if ($(_this).val().length == 0) {
$(_this).val(defaultValue).css('color', options.placeholderColor)
}
}).trigger('blur');
} else {
var $imitate = $('<span class="wrap-placeholder" style="position:absolute; display:inline-block; overflow:hidden; color:'+options.placeholderColor+'; width:'+$(_this).width()+'px; height:'+$(_this).outerHeight()+'px;">' + (defaultValue==undefined?"":defaultValue) + '</span>');
//hg-add
$(_this).focus(function(){
$imitate.hide();
}).blur(function () {
/^$/.test($(_this).val()) && $imitate.show();
});
$imitate.css({
'margin-left':$(_this).css('margin-left'),
'margin-top':$(_this).css('margin-top'),
'text-align':'left',
'font-size':$(_this).css('font-size'),
'font-family':$(_this).css('font-family'),
'font-weight':$(_this).css('font-weight'),
'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px',
'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px',
'padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0
});
$(_this).before($imitate.click(function () {
$(_this).trigger('focus');
})); $(_this).val().length != 0 && $imitate.hide(); if (options.onInput) {
var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
$(_this).bind(inputChangeEvent, function () {
$imitate[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
});
} else {
$(_this).focus(function () {
$imitate.hide();
}).blur(function () {
/^$/.test($(_this).val()) && $imitate.show();
});
}
}
}
});
return this;
}
});
})(jQuery);/*调用方式： textarea需要田间onInput=false属性*/
$('input[placeholder], textarea[placeholder]').each(function(){$(this).is('input')?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});});$(document).ready(function(){
if (typeof (Worker) == "undefined"){
$('input[placeholder], textarea[placeholder]').each(function(){$(this).is('input')?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});});
} });

测试html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="author" content="Gezhigang" />
<title>placeholder</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="placeholder.js"></script> </head>
<body>
<div style="margin-left: 30%;margin-top: 10%;">
<form>
<table>
<tr>
<td height="30px">用户名</td>
<td><input type="text" placeholder="这里输入帐号。。。"/></td>
</tr>
<tr >
<td height="30px">密码</td>
<td><input type="text" placeholder="这里输入密码。。。"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="会员登录" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>