demo-placeholder兼容ie8

時間 2019-11-10

原文原文鏈接

模擬placeholder兼容ie8，粘貼複製代碼可直接使用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="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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。