您的位置：首页 > Web前端 > HTML5

IE8 不支持html5 placeholder的解决方案

2016-02-16 20:19 756 查看

　　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="initial-scale=1.0,user-scalable=no">
-->
<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>

　　测试例子

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航