「密碼」在佔位符的IE中顯示爲「********」

我使用HTLM5佔位符並添加了modernizr.js以使其在IE中工作。該代碼段爲：「密碼」在佔位符的IE中顯示爲「********」

<input type="password" placeholder="Password"> 

function hasPlaceholderSupport() { 
    var input = document.createElement('input'); 
    return ('placeholder' in input); 
} 


$(document).ready(function(){ 
    if(!Modernizr.input.placeholder){ 

     $('[placeholder]').focus(function() { 
      var input = $(this); 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
       input.removeClass('placeholder'); 
      } 
     }).blur(function() { 
      var input = $(this); 
      if (input.val() == '' || input.val() == input.attr('placeholder')) { 
       input.addClass('placeholder'); 
       input.val(input.attr('placeholder')); 
      } 
     }).blur(); 
     $('[placeholder]').parents('form').submit(function() { 
      $(this).find('[placeholder]').each(function() { 
       var input = $(this); 
       if (input.val() == input.attr('placeholder')) { 
        input.val(''); 
       } 
      }) 
     }); 

    } 
});

它是爲其他瀏覽器工作正常，我想顯示在IE input type password文本，而是它把佔位符的屏蔽字符。 "Password"文本如何顯示。

來源

2011-10-25 user850234

我建議不要重新發明這個特殊的車輪，除非你真的喜歡車輪。 :) https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills – deceze

奇怪。我不應該在任何瀏覽器中工作，因爲只要它有type = password，它應該隱藏文本。你可以做的只是在輸入佔位符文本時添加attr（'type'，'text'），並在刪除placeholde rtext時恢復它。 –

密碼字段實際上並不需要佔位符，只需給它一個標籤，告訴用戶它的用途。 – RobG

問題是您的佔位符回退腳本正在使用該字段的值來顯示佔位符。

密碼字段當然會隱藏它們的值，所以這種技術在密碼字段上的失敗方式完全如您所述。

你需要的是一個佔位符腳本，它通過將佔位符文本寫入一個疊加在字段頂部的額外元素（或者如果字段背景是透明的話在它後面）來工作。該腳本可以改變這個元素，而不是改變字段的值。

有一個完整的負載腳本可以做到這一點 - this one, for example（但也有許多其他人）。

另一種選擇是動態地將字段類型從password更改爲text，並在佔位符切換時再返回。這可能是一個更快的勝利，以適應您現有的代碼，但我建議長期使用其他技術。

希望有所幫助。

來源

2011-10-25 07:37:58 Spudley

該鏈接不再有效。這可能是一個很好的替代方案，並附上一些關於該技術的評論 - [jQuery佔位符插件]（http://www.iliadraznin.com/2011/02/jquery-placeholder-plugin/） – rdamborsky

作爲供參考，IE8及更低版本（和可能IE9）不支持從密碼到文本動態更改類型。 – GJK

嘗試使用此代碼...我希望它能幫助你。

/* <![CDATA[ */ 
$(function() { 
    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(''); 
     }) 
    }); 
    } 
}); 
/* ]]> */

來源

2013-05-04 14:41:02 Alverated

「密碼」在佔位符的IE中顯示爲「********」

回答

相關問題