Question

我正在尝试创建一个登录页面，不用担心实际登录，但是我正在尝试实现输入字段中有一些褪色文本的效果，当您单击它时，文本消失或者如果你点击它，文字会重新出现。

我有这个工作用于我的“用户名”输入字段，但“密码”字段给我带来了问题，因为我不能只做$("#password").attr("type","password")。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <!-- Links -->
    <link rel="stylesheet" type="text/css" href="style.css" />

    <!-- Scripts -->
    <script type="text/javascript" src="jQuery.js"></script>
    <script>

        // document script
        $(document).ready(function(){

            // login box event handler
            $('#login').click(function(){

                $('.loginBox').animate({ 
                    height: '150px'
                }, 
                    '1000'
                );
                $('#username').show();

                // add pw placeholder field
                $('#password').after('<input type="text" id="placeHolder" value="Password" class="placeHolder" />');
                $('#password').hide();
            });

            // username field focus and blur event handlers
            $('#username').focus(function() {
                if($(this).hasClass('placeHolder')){
                    $(this).val('');
                    $(this).removeClass('placeHolder');
                }
            });
            $('#username').blur(function() {
                if($(this).val() == '') {
                    $(this).val('Username');
                    $(this).addClass('placeHolder');
                }
            });         

            // password field focus and blur event handlers
            $('#placeHolder').focus(function() {
                $('#placeHolder').hide();
                $('#password').show();
                $('#password').focus();
            });
            $('#password').blur(function() {
                if($('#password').val() == '') {
                    $('#placeHolder').show();
                    $('#password').hide();
                }   
            });

        });

    </script>

</head>
<body>

    <div id="loginBox" class="loginBox">
        <a id="login">Proceed to Login</a><br />
        <div id="loginForm">
            <form>
                <input type="text" id="username" class="placeHolder" value="Username" />
                <input type="password" id="password" class="placeHolder" value="" />
            </form>
        </div>
    </div>

</body>
</html>

现在，我可以点击密码输入框并输入，但文本没有消失，“type”也没有设置为“password”...我创建的新输入字段isn'隐藏，它只是保持可见，我不知道问题在哪里。有什么想法吗？

Answer 1

不是尝试更改密码输入的“类型”，而是使用文本输入交换密码输入。例如，显示输入值为“Password”的文本，而密码输入为“display：none;”。

<input type="text" id="txtPassword" value="Password" />
<input type="password" id="password" class="..." value="" style="display:none;" />

在“txtPassword”上设置焦点事件以隐藏“txtPassword”并显示+焦点实际密码输入。

设置模糊事件以验证您的密码输入，如果没有输入任何值，则交换回“txtPassword”。

Answer 2

您可能想尝试插件，例如http://plugins.jquery.com/project/inline_label

Answer 3

我明白了。我在前两个之后创建了另一个输入字段，而不是通过jQuery创建它。

<form>
    <input type="text" id="username" class="placeHolder" value="Username" />
    <input type="password" id="password" class="placeHolder" value="" />
    <input type="text" id="placeHolder" class="placeHolder" value="Password" />
</form>

Answer 4

我意识到这已被标记为已回答，但我想使用onfocus事件扩展uhleeka的解决方案。在IE和其他旧版浏览器中对我很有用。

$('#textPass').focus(function(){
$(this).hide();
$('#password').css('display','inline');
$('#password').focus();
});

$('#password').blur(function(){
$(this).css('display','none');
$('#textPass').show();

});

<input type="text" id="txtPassword" value="Password" />
<input type="password" id="password" class="..." value="" style="display:none;" /

在jQuery中输入字段占位符

4 个答案: