IE8中类型密码的jQuery输入占位符

我使用的是jQuery而不是HTML5占位符属性

 

这对于type="text"工作正常,但对于type="password"它只显示*

我将如何使用占位符密码字段? 需要在IE8中

谢谢你的回答……

我创建了一个普通输入,并在focus上将其切换到密码字段,如果blur时该值为空,则将其切换回正常输入,否则将其保留为密码字段。

这是一个有效的JSFiddle: http : //jsfiddle.net/q8ajJ/

HTML

    

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) }); 

这是另一个肮脏的黑客 – 您可以使用position: absolute创建label position: absolute并使用JS在焦点和模糊时显示/隐藏它。

据我所知,它适用于任何浏览器。 而且,validation表单提交更简单。

HTML

 

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(); } } }); 

基于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')); 

希望这可以帮助!

为占位符添加另一个input元素可能会在formvalidation和提交过程中产生麻烦。 我以不同的方式解决了这个问题。

HTML

 

jQuery函数

 function placeholder(form) { form.wrapInner('
    '); form.find('input[placeholder]').each(function (index, current) { $(current).css('padding', 0).wrap('
  • '); var height = $(current).parent('li').height(); var $current = $(current), $placeholder = $('
    '+$current.attr('placeholder')+'
    '); $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")); 

这适用于所有类型的输入字段,其中包含在IE8,IE9,IE10,Google Chrome,FireFox,Safari和Opera中测试的type="password"占位符。

使用这段代码,jQuery将完成其余的工作……

html标签替换

   

jQuery的善良……

 $(document).ready(function(){ $('.ie8 [placeholder][type="password"]').each(function(){ $(this).wrap('
'); $(''+$(this).attr('placeholder')+'').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(); }); });

样式可以更改新占位符的外观