1. 程式人生 > >解決Placeholder的IE8相容問題

解決Placeholder的IE8相容問題

本篇文章主要介紹了使用jQuery快速解決input中placeholder值在ie中無法支援的問題。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>無標題文件</title>
  6. <script type="text/javascript"
     src="js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript">
  8. //第一種方法
  9. $(document).ready(function(){
  10.     var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
  11.     if(defaultValue==''){
  12.         input.value=text}
  13.         input.onfocus=function(){
  14.             if(input.value===text){this.value=''}};
  15.             input.onblur=function(){if(input.value===''){this.value=text}}};
  16.             if(!supportPlaceholder){
  17.                 for(var i=0,len=inputs.length;i<len;i++){var
     input=inputs[i],text=input.getAttribute('placeholder');
  18.                 if(input.type==='text'&&text){placeholder(input)}}}});
  19. //第二種方法
  20. $(function(){
  21. if(!placeholderSupport()){   // 判斷瀏覽器是否支援 placeholder
  22.     $('[placeholder]').focus(function() {
  23.         var input = $(this);
  24.         if (input.val() == input.attr('placeholder')) {
  25.             input.val('');
  26.             input.removeClass('placeholder');
  27.         }
  28.     }).blur(function() {
  29.         var input = $(this);
  30.         if (input.val() == '' || input.val() == input.attr('placeholder')) {
  31.             input.addClass('placeholder');
  32.             input.val(input.attr('placeholder'));
  33.         }
  34.     }).blur();
  35. };
  36. })
  37. function placeholderSupport() {
  38.     return 'placeholder' in document.createElement('input');
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <form>
  44.   <label for="name">使用者名稱:</label>
  45.   <input type="text" placeholder="請輸入使用者名稱"/>
  46. </form>
  47. </body>
  48. </html>

*********************************其他方法*********************************

  1. <!--ie placeholder 相容 start-->
  2. <script type="text/javascript">
  3.   if( !('placeholder' in document.createElement('input')) ){
  4.     $('input[placeholder],textarea[placeholder]').each(function(){
  5.       var that = $(this),
  6.       text= that.attr('placeholder');
  7.       if(that.val()===""){
  8.         that.val(text).addClass('placeholder');
  9.       }
  10.       that.focus(function(){
  11.         if(that.val()===text){
  12.           that.val("").removeClass('placeholder');
  13.         }
  14.       })
  15.       .blur(function(){
  16.         if(that.val()===""){
  17.           that.val(text).addClass('placeholder');
  18.         }
  19.       })
  20.       .closest('form').submit(function(){
  21.         if(that.val() === text){
  22.           that.val('');
  23.         }
  24.       });
  25.     });
  26.   }
  27. </script>
  28. <!--ie placeholder 相容 end-->