我知道有很多占位符问题,但我正在努力完善我的。
我当前的代码很有效,并且做了它应该做的事情。问题是,当我去放置“密码”占位符时,它会将占位符放在屏蔽字符中。关于如何解决这个问题的任何想法?
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
var active = document.activeElement;
$(':password').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':password').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
传球的字段:
<div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>
答案 0 :(得分:16)
你也可以尝试这个...它检测到浏览器不支持占位符并适用于所有输入类型
function FauxPlaceholder() {
if(!ElementSupportAttribute('input','placeholder')) {
$("input[placeholder]").each(function() {
var $input = $(this);
$input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
var $faux = $('#'+$input.attr('id')+'-faux');
$faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style'));
$input.hide();
$faux.focus(function() {
$faux.hide();
$input.show().focus();
});
$input.blur(function() {
if($input.val() === '') {
$input.hide();
$faux.show();
}
});
});
}
}
function ElementSupportAttribute(elm, attr) {
var test = document.createElement(elm);
return attr in test;
}
答案 1 :(得分:4)
你能用密码字段换掉原始文本字段吗?
$('#pass').focus(
function(){
var pass = $('<input id="pass" type="password">');
$(this).replaceWith(pass);
pass.focus();
}
);
<input id="pass" type="text" value="Passowrd">
答案 2 :(得分:2)
之前我遇到过IE的这个问题。这是我的解决方案:)
答案 3 :(得分:1)
如果我理解这一点,你希望该字段在没有输入任何内容时说“密码”;但是,“密码”显示为“********”。
对它的一个不错的解决方案(根据你的编码方式也优雅地降级)是:
for
属性设置为指向INPUT的ID,以便在单击LABEL时聚焦INPUT。.showMe
)时才能看到LABEL。答案 4 :(得分:1)
根据您是否希望能够动态更改占位符内的文本,最简单的解决方案可能是将占位符文本设置为图像。
input {
background: url(_img/placeholder.png) 50% 5px no-repeat;
.
.
.
}
input:focus {
background: none;
}
显然,使用此方法有许多不同的方法,您必须使用某种修复方法才能使:focus
在不支持它的浏览器上运行。
答案 5 :(得分:1)
这是我的插件:
if(jQuery.support.placeholder==false){
// No default treatment
$('[placeholder]').focus(function(){
if($(this).val()==$(this).attr('placeholder'))
$(this).val('');
if($(this).data('type')=='password')
$(this).get(0).type='password';
});
$('[placeholder]').blur(function(){
if($(this).val()==''){
if($(this).attr('type')=='password'){
$(this).data('type','password').get(0).type='text';
}
$(this).val($(this).attr('placeholder'));
}
}).blur();
}
答案 6 :(得分:0)
我有同样的问题所以我写了一个小插件
$.fn.passLabel = function(){
var
T = $(this),
P = T.find('input[type=password]'),
V = pass.val();
P.attr('type','text');
P.focus(function(){
if(V == "")
P.attr('type','password');
});
}
现在你只需为它调用它就可以找到所有输入字段和密码 属性。
例如
$('form').passLabel();
答案 7 :(得分:0)
有点晚了但是在这里同样,我正在解决这个问题,IE9也没有将密码占位符显示为文本,在互联网上的几乎所有答案中都有人建议改变类型,但如果你这样做,你会有另一个问题在登录页面上,就像你会看到双击密码字段,因为它的类型从密码更改为文本,顺便说一下,它与prop一起工作。例如prop(&#34; type&#34;,&#34; password&#34;)如果你想改变一个元素的类型。
另一方面,我认为大多数答案都来自单一的解决方案,如焦点和模糊元素的行为。但是当你应用这个插件时,其他文本字段也会受到影响,没有特定的或者我可以说是一般化的解决方案,我在登录页面上仍然有一个小问题,其中包含密码字段,但它正确显示文本。无论如何。这里是我如何配置,复制,更改和/或其他继承的答案。(function($) {
$.fn.placeholder = function() {
$('input[placeholder], textarea[placeholder]').focus(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
if (input.prop("id") === "password") {
input.prop("type", "password");
}
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.addClass('placeholder');
if (input.prop("type") === "password") {
input.prop("type", "text");
}
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('input[placeholder], textarea[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
}
});
});
};
})(jQuery);
仍然是一个活跃的问题......:D