佔位符插件應該可以在IE8中工作

我正在尋找一個好的佔位符插件，它可以在IE8中使用，並帶有輸入類型密碼。我找到了一些，但他們都不滿足我的要求。此外，我需要的佔位符文本應該變暗和斜體。佔位符插件應該可以在IE8中工作

任何信息對我都很有幫助。

2012-04-07 Tapas Bose

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      if ($.browser.msie) {   //this is for only ie condition (microsoft internet explore) 
       $('input[type="text"][placeholder], textarea[placeholder]').each(function() { 
        var obj = $(this); 

        if (obj.attr('placeholder') != '') { 
         obj.addClass('IePlaceHolder'); 

         if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') { 
          obj.val(obj.attr('placeholder')); 
         } 
        } 
       }); 

       $('.IePlaceHolder').focus(function() { 
        var obj = $(this); 
        if (obj.val() == obj.attr('placeholder')) { 
         obj.val(''); 
        } 
       }); 

       $('.IePlaceHolder').blur(function() { 
        var obj = $(this); 
        if ($.trim(obj.val()) == '') { 
         obj.val(obj.attr('placeholder')); 
        } 
       }); 
      } 
     }); 
    </script> 
</head> 
<body> 
<textarea placeholder="Detail-1" rows="3" cols="3" value=""></textarea><br /> 
<input type="text" placeholder="UserName" /><br /> 
<input type="password" placeholder="Password" /><br /> 
<textarea placeholder="Details-2" rows="3" cols="3"></textarea> 
</body> 
</html>

來源

2012-04-26 14:59:53 Thulasiram

佔位符不會來的密碼單獨。我正在努力解決它。 – Thulasiram 2012-04-26 15:00:49

爲現場演示請參閱此鏈接：http://jsfiddle.net/nanoquantumtech/wbcTm/ – Thulasiram 2012-04-26 15:06:07

我測試（http://jsfiddle.net/nanoquantumtech/wbcTm/）鏈接與ie9工作正常。除密碼外。 – Thulasiram 2012-04-26 15:08:15

試試這個。

腳本：

$(document).ready(function() { 
     if ($.browser.msie) {   //this is for only ie condition (microsoft internet explore) 
      $('input[type="text"][placeholder], textarea[placeholder]').each(function() { 
       var obj = $(this); 

       if (obj.attr('placeholder') != '') { 
        obj.addClass('IePlaceHolder'); 

        if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') { 
         obj.val(obj.attr('placeholder')); 
        } 
       } 
      }); 

      $('.IePlaceHolder').focus(function() { 
       var obj = $(this); 
       if (obj.val() == obj.attr('placeholder')) { 
        obj.val(''); 
       } 
      }); 

      $('.IePlaceHolder').blur(function() { 
       var obj = $(this); 
       if ($.trim(obj.val()) == '') { 
        obj.val(obj.attr('placeholder')); 
            } 
      }); 
     } 
     // On DOM ready, hide the real password 
     $('.real').hide(); 

     // Show the fake pass (because JS is enabled) 
     $('.fake').show(); 

     // On focus of the fake password field 
     $('.fake').focus(function(){ 
     $(this).hide(); // hide the fake password input text 
     $('.real').show().focus(); // and show the real password input password 
     }); 

     // On blur of the real pass 
     $('.real').blur(function(){ 
     if($(this).val() == ""){ // if the value is empty, 
     $(this).hide(); // hide the real password field 
     $('.fake').show(); // show the fake password 
     } 
     // otherwise, a password has been entered, 
     // so do nothing (leave the real password showing) 
     }); 

    });

也把自己的形式：

<input type="password" name="password" class="field real" id="password" /> 
<input type="text" class="field fake" tabindex="1" value="" placeholder="Password" />

來源

2013-01-29 21:41:37

掙扎角落找尋你的代碼後，我結束了與此：

$('input[type="text"][placeholder], textarea[placeholder]').each(function(){ 
     var o=$(this); 
     if(o.attr('placeholder') != '') { 
     o.addClass('IePlaceHolder'); 
      if($.trim(o.val())=='') { 
       o.val(o.attr('placeholder')).css('color','#888888'); 
       o.addClass('IeIsEmpty'); 
       o.removeClass('focusedon'); 
      } 
     } 
    }); 

    $('.IePlaceHolder').focus(function(){ 
     var o = $(this); 
     if(o.val() == o.attr('placeholder')) { 
      o.css('color', '#666666'); 
      o.addClass('focusedon'); 
     } /* endIF */ 
    }); 

    $('.IePlaceHolder').blur(function(){ 
     var o = $(this); 
     if($.trim(o.val())=='' || $.trim(o.val())==o.attr('placeholder')) { 
      o.val(o.attr('placeholder')); 
      o.css('color', '#888888'); 
      if(!o.hasClass('IeIsEmpty')) o.addClass('IeIsEmpty'); 
      o.removeClass('focusedon'); 
     } 
    }); 

    $('.IePlaceHolder').on("keyup change paste", function(){ 
     var o=$(this); 
     if($.trim(o.val())!='' && $.trim(o.val())!=o.attr('placeholder')) { 
      o.css('color', '#111111'); 
      o.removeClass('IeIsEmpty'); 
     } 
    }) 
    .on('keydown', function(){ 
     var o=$(this); 
     if($.trim(o.val())!='' && $.trim(o.val())==o.attr('placeholder')) { 
      o.val(''); 
     } 
    }) 
    .on("click", function(){ 
     var o=$(this); 
     if(o.val() != o.attr('placeholder')) return; 
     if(this.setSelectionRange) 
      { 
       this.focus(); 
       this.setSelectionRange(0,0); 
      } 
      else if(this.createTextRange) { 
      var r = this.createTextRange(); 
       r.collapse(true); 
       r.moveEnd('character', 0); 
       r.moveStart('character', 0); 
       r.select(); 
      } 
    });

來源

2013-04-14 13:23:15 Mbarry

佔位符插件應該可以在IE8中工作

回答

相關問題