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>
