jQuery的輸入佔位符，在IE8

Question

我使用的，而不是HTML5佔位符屬性的jQuery型密碼

<input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Email'; }" onclick="if (this.value == 'Email') { this.value = ''; }" /> 

這是工作的罰款type="text"但type="password"它僅顯示*

如何我將使用佔位符作爲密碼字段？需要出IE8

先謝謝了答案......

Answer 1

我創建了一個普通的輸入，並在focus切換到一個密碼字段，如果值是blur空，然後再切換回一個正常輸入，否則將其作爲密碼字段。

http://jsfiddle.net/q8ajJ/Here is a working JSFiddle:

的HTML

<!-- Style = display none for people who dont have javascript --> 
<input type="text" name="fake_pass" id="fake_pass" value="Enter Password:" style="display:none"/> 
<input type="password" name="real_pass" id="real_pass"/>​ 

的JavaScript（jQuery的）

// On DOM ready, hide the real password 
$('#real_pass').hide(); 

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

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

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

Answer 2

Here是另一個骯髒的黑客 - 你可以創建label與position: absolute和顯示/隱藏與焦點和模糊JS。

據我所知，它適用於任何瀏覽器。此外，驗證表單提交更爲簡單。

HTML

<div class="wrapper"> 
    <input class="withPlaceholder" type="password" id="pass" /> 
    <label class="placeholder" for="pass">Password</label> 
</div> 
<br /> 
<div class="wrapper"> 
    <input class="withPlaceholder" type="password" id="pass2" /> 
    <label class="placeholder" for="pass2">Password2</label> 
</div> 

CSS

div.wrapper {position: relative} 
label.placeholder {position: absolute; color: #CCC; left: 2px; top: 0} 

JS

$("input.withPlaceholder").on({ 
    focus: function() { 
     $("label[for=" + $(this).prop("id") + "]").hide(); 
    }, 
    blur: function() { 
     if ($(this).val().length == 0) { 
      $("label[for=" + $(this).prop("id") + "]").show(); 
     } 
    } 
}); 

Answer 3

基於JustAnil的答案，並尋找一種方式，以避免必須手動添加每個相應的每一個密碼字段，我想出了JustAnil解決方案的這種改進：

function ManagePasswords(root) { 
    root.find('input[type=password][placeholder]').each(function (index, current) { 
     var $current = $(current), 
      $fake = $current.clone().attr('type', 'text'); 

     $fake.val($fake.attr('placeholder')); 

     $fake.insertBefore($current); 
     $current.hide(); 

     $fake.focusin(function() { 
      $(this).hide(); 
      $(this).next().show().focus(); 
     }); 

     $current.blur(function() { 
      if ($(this).val() == '') { 
       $(this).hide(); 
       $(this).prev().show(); 
      } 
     }); 
    }); 
} 

然後，所有你需要做的就是調用

ManagePasswords($('#rootElement')); 

希望這有助於！

Answer 4

爲佔位符添加另一個input元素可能會在form驗證和提交期間創建問題。我用不同的方式解決了這個問題。

的HTML

<form id="test"> 
    <input type="text" id="name" name="name" placeholder="Name" /> 
    <input type="password" id="password" name="password" placeholder="Password" /> 
</form> 

jQuery函數

function placeholder(form) { 
    form.wrapInner('<ul style="list-style: none; list-style-type:none; padding:0; margin: 0;">'); 
    form.find('input[placeholder]').each(function (index, current) { 
     $(current).css('padding', 0).wrap('<li style="position: relative; list-style: none; list-style-type:none; padding:0; margin: 0;">');    
     var height = $(current).parent('li').height(); 
     var $current = $(current), 
      $placeholder = $('<div class="placeholder">'+$current.attr('placeholder')+'</div>'); 
     $placeholder.css({'color': '#AAA', 'position':'absolute', 'top': 0, 'left': 0, 'line-height': height+'px', 'margin': '0 0 0 5px', 'border': '0 none', 'outline': '0 none', 'padding': 0}); 
     $placeholder.insertAfter($current); 
     $current.removeAttr('placeholder'); 
     $placeholder.click(function(){ 
      $current.focus() 
     }); 
     $current.keypress(function(){ 
      if($(this).val().length >= 0) { 
       $placeholder.hide(); 
      } 
     }); 
     $current.blur(function(){ 
      if($(this).val().length == 0) { 
       $placeholder.show(); 
      } else { 
       $placeholder.hide(); 
      } 
     });     
    });   
} 

現在只是調用函數的形式。

placeholder($("#test")); 

這將與佔位符，包括type="password"在IE8，IE9，IE10，谷歌Chrome，火狐，Safari和Opera測試的所有類型的輸入領域的工作。

Answer 5

使用此代碼，jQuery將做休息......

HTML代碼替換

<!--[if IE 8]><html class="ie8"><![endif]--> 
<!--[if gt IE 8]><html><![endif]--> 

jQuery的善良......

$(document).ready(function(){ 

$('.ie8 [placeholder][type="password"]').each(function(){ 
     $(this).wrap('<div style="position: relative;"></div>'); 
     $('<span style=" position: absolute;top: 5px;left:14px;" class="ie8Lbls">'+$(this).attr('placeholder')+'</span>').insertAfter($(this)); 
     $(this).attr('placeholder',''); 
     if($(this).val() == "") {$(this).parent().find('.ie8Lbls').show();} 
    }).on('focus',function(){ 
     $(this).parent().find('.ie8Lbls').hide(); 
    }).on('blur',function(){ 
     if($(this).val() == "") {$(this).parent().find('.ie8Lbls').show();} 
    }); 
    $(document).on('click','.ie8Lbls',function(){ 
     $(this).parent().find('input').focus(); 
    }); 

}); 

樣式更改新的外觀佔位符

<style> 
.ie8Lbls { 
    font-size:10px; 
} 
</style>