藉助jquery，讓IE也支持HTML5新屬性：Placeholder,Autofocus。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <meta name="author" content="">
- <title>test</title>
- <!--[if lt IE 9]>
- <script src="js/html5shiv-printshiv.js"></script>
- <![endif]-->
- <script src="js/jquery-1.7.2.min.js"></script>
- <script>
- $(function(){
- //autofocus
- $('[autofocus]:not(:focus)').eq(0).focus();
- //placeholder
- var input = document.createElement("input");
- if(('placeholder' in input)==false) {
- $('[placeholder]').focus(function() {
- var i = $(this);
- if(i.val() == i.attr('placeholder')) {
- i.val('').removeClass('placeholder');
- if(i.hasClass('password')) {
- i.removeClass('password');
- this.type='password';
- }
- }
- }).blur(function() {
- var i = $(this);
- if(i.val() == '' || i.val() == i.attr('placeholder')) {
- if(this.type=='password') {
- i.addClass('password');
- this.type='text';
- }
- i.addClass('placeholder').val(i.attr('placeholder'));
- }
- }).blur().parents('form').submit(function() {
- $(this).find('[placeholder]').each(function() {
- var i = $(this);
- if(i.val() == i.attr('placeholder'))
- i.val('');
- })
- });
- }
- });
- </script>
- <style>
- .placeholder{
- color: #aaa;
- }
- </style>
- </head>
- <body>
- <input type="text" placeholder="UserName" autofocus required>
- <input id="password" type="password" placeholder="Password" required>
- </body>
- </html>
該方案比較簡單，但不是很完美，新方法見新博文：知乎網解決HTML5 Placeholder的方案