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
元素可能会在form
validation和提交过程中产生麻烦。 我以不同的方式解决了这个问题。
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标签替换