您的位置：首页 > 其它

IE如何兼容placeholder属性

2015-10-28 20:29 507 查看

在前端开发中，经常需要为input设置placeholder属性，但是placeholder是HTML5新属性，在IE10以下不兼容，那么如何完美兼容呢？

网上搜索了一下，其实也挺简单的，可以采用以下方法：

<script type="text/javascript">
if (!('placeholder' in document.createElement('input'))) {
$('input[placeholder],textarea[placeholder]').each(function() {
var that = $(this),
text = that.attr('placeholder');
if (that.val() === "") {
that.val(text).addClass('placeholder');
}
that.focus(function() {
if (that.val() === text) {
that.val("").removeClass('placeholder');
}
}).blur(function() {
if (that.val() === "") {
that.val(text).addClass('placeholder');
}
}).closest('form').submit(function() {
if (that.val() === text) {
that.val('');
}
});
});
}
<script>

　　这段代码很容易理解，但是用的时候发现对type=password类型不支持，于是继续搜索直到有了JPlaceHolder.js，感觉很不错，用起来也很简单

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

</head>

<body>
<input type="password" placeholder="密码">
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="JPlaceHolder.js"></script>
</body>

</html>

　　下载地址：JPlaceHolder.js

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

标签：

相关文章推荐

新的分享

章节导航