demo-placeholder兼容ie8

 模拟placeholder兼容ie8，粘贴复制代码可直接使用

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input {
padding: 5px 0; /* 解决input在ie8以下的文字错乱问题 */
color: #666;
}

#password {
display: none;
/* 必须 */
}
</style>
</head>

<body>
<input type="text" id="username" placeholder="用户名">
<input type="password" id="password" placeholder="密码">
<input type="text" id="passwordText" placeholder="密码">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>

//IE 模拟 placeholder
$("#username").val("用户名");
$("#passwordText").val("密码");
textFill($("#username"));
$("#passwordText").focus(function () {
$(this).hide();
$("#password").show().focus();
});

$("#password").blur(function () {
if ($(this).val() == '') {
$(this).hide();
$("#passwordText").show();
}
});

function textFill(input) {
input.focus(function () {
if ($.trim(input.val()) == input.attr('placeholder')) {
input.val("");
}
});
input.blur(function () {
if ($.trim(input.val()) == "") {
input.val(input.attr('placeholder'));
}
});
}
</script>
</body>

</html>

 

posted on 2018-08-20 09:02  逢时  阅读(115)  评论(0)  编辑  收藏  举报

导航