我该如何实现CSS/HTML中使用密码字段的非常简单的文本框提示

How would I achieve very simple text box hints that work with password fields in CSS / HTML?

本文关键字：字段 密码 非常 提示 文本 简单 HTML 何实现 实现 CSS      更新时间：2023-09-26

我希望web应用程序中的大多数文本框都能显示一个提示，以尽量减少屏幕上的混乱。

我遇到了很多解决方案，但对于我想要的来说，所有的解决方案似乎都很复杂。现在可能值得指出的是，我的Javascript知识相当贫乏。

我所需要的只是一个简单的脚本，它可以让我有文本框提示（使用CSS样式，这样我就可以将其灰显和斜体），并且可以使用密码字段。

我确实有一个脚本，但它只允许我每页有一个密码字段，而且在任何地方都不容易使用。

谢谢你，非常感谢你的帮助。

编辑：不幸的是，这也需要与IE6兼容。

例如，最安全的方法可能是创建两个密码框，其中一个包含文本，您可以执行以下操作：

<input style="color:#B0AEAE;width:167px;display:none;" id="password_text" type="text" value="Password" />
<input type="password" id="password_password" name="password" style="width:167px" maxlength="20"/>

然后，你首先用（我使用）jquery隐藏"正常"密码输入字段，并显示隐藏的密码字段，你可以点击返回另一个，如下所示：

$(document).ready(function() {
$('#password_text').show();
$('#password_password').hide();
$('#password_text').focus(function() {
    $('#password_text').hide();
    $('#password_password').show();
    $('#password_password').focus();
});
    $('#password_password').blur(function() {
    var password = $(this).val();
    if(password == '') {
        $('#password_password').hide(); 
        $('#password_text').show();
    }
});

})；

把这个放在最上面：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
相关文章：