$(document).ready(function() {
// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');
});
这是为了将password类型的#password输入字段(id="password")更改为普通的文本字段,然后填充文本"password"。
但这并不奏效。为什么?
表格如下:
<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
<ol>
<li>
<div class="element">
<input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
</div>
</li>
<li>
<div class="element">
<input type="password" name="password" id="password" value="" class="input-text" />
</div>
</li>
<li class="button">
<div class="button">
<input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
</div>
</li>
</ol>
</form>
这是所有IE8爱好者的又一个选择,在新浏览器上也能完美运行。您可以只给文本上色以匹配输入的背景。如果你有一个单一的字段,当你点击/聚焦在该字段上时,这将改变颜色为黑色。我不会在公共站点上使用这个,因为它会“迷惑”大多数人,但我在一个只有一个人可以访问用户密码的ADMIN部分中使用它。
$('#MyPass').click(function() {
$(this).css('color', '#000000');
});
-OR-
$('#MyPass').focus(function() {
$(this).css('color', '#000000');
});
这也是需要的,当您离开字段时,将文本更改为白色。简单,简单,简单。
$("#MyPass").blur(function() {
$(this).css('color', '#ffffff');
});
[另一选择]
现在,如果你有几个字段,你正在检查,都有相同的ID,因为我正在使用它,添加一个类的“pass”字段,你想隐藏的文本。设置密码字段类型为“text”。这样,只有类为“pass”的字段才会被更改。
<input type="text" class="pass" id="inp_2" value="snoogle"/>
$('[id^=inp_]').click(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#000000');
}
// rest of code
});
这是第二部分。这将在您离开字段后将文本更改为白色。
$("[id^=inp_]").blur(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#ffffff');
}
// rest of code
});
更容易……不需要创建所有动态元素。只需创建两个单独的字段,其中一个为“真实”密码字段(type="password"),另一个为“假”密码字段(type="text"),将假字段中的文本设置为浅灰色,并将初始值设置为“password”。然后用jQuery添加几行Javascript代码,如下所示:
<script type="text/javascript">
function pwdFocus() {
$('#fakepassword').hide();
$('#password').show();
$('#password').focus();
}
function pwdBlur() {
if ($('#password').attr('value') == '') {
$('#password').hide();
$('#fakepassword').show();
}
}
</script>
<input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
<input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />
因此,当用户输入“假”密码字段时,它将被隐藏,真实字段将被显示,焦点将移动到真实字段。他们将永远无法在假字段中输入文本。
当用户离开真实的密码字段时,脚本将查看它是否为空,如果为空,将隐藏真实的字段并显示假的字段。
注意不要在两个输入元素之间留下空格,因为IE会将一个元素置于另一个元素之后(呈现空格),并且当用户进入/退出字段时,字段会出现移动。