在 IE 中显示密码字段的占位符文本 [英] Showing Placeholder text for password field in IE
本文介绍了在 IE 中显示密码字段的占位符文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我知道有很多占位符问题,但我正在努力完善我的问题.
我当前的代码运行良好,并完成了它应该做的事情.问题是,当我去放置密码"占位符时,它会将占位符放在掩码字符中.关于如何解决这个问题的任何想法?
$(function() {如果(!$.support.placeholder){var active = document.activeElement;$(':text').focus(function () {if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {$(this).val('').removeClass('hasPlaceholder');}}).blur(函数(){if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('占位符'))) {$(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(函数(){if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('占位符'))) {$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');}});$(':password').blur();$(active).focus();$('form').submit(function () {$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });});}});
我的通行证字段:
;</div> 解决方案 你也可以试试这个...它检测到浏览器不支持占位符并且适用于所有输入类型
function FauxPlaceholder() {if(!ElementSupportAttribute('input','placeholder')) {$("输入[占位符]").each(function() {var $input = $(this);$input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('占位符') + '"/>');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();}});});}}功能元素支持属性(榆树,属性){var test = document.createElement(elm);在测试中返回 attr;}
I know there is a ton of placeholder questions, but I am trying to perfect mine.
My current code works great and does what it's supposed to. The problem is, when I go to place the "password" placeholder, it puts the placeholder in the masking characters. Any ideas on how to get around that?
$(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(''); });
});
}
});
My field for the pass:
<div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>
解决方案 You could also try this... it detects that the browser does not have support for placeholder and works for all input types
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;
}
这篇关于在 IE 中显示密码字段的占位符文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文