代码之家 › 专栏 › 技术社区 › Hristo

jquery中的输入字段占位符

input jquery

Hristo · 技术社区 · 14 年前

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

我的“用户名”输入字段有这个功能,但是“密码”字段会给我带来问题,因为我不能这样做 $("#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>

现在,我可以单击密码输入框并输入,但文本不会消失,并且“类型”不会设置为“密码”…我创建的新输入字段没有被隐藏,它只是保持可见,我不确定问题在哪里。有什么想法吗?

4 回复 | 直到 11 年前

uhleeka 14 年前

不要试图更改密码输入的“类型”,而是用文本输入交换密码输入。例如,当密码输入为“display:none;”时,显示值为“password”的文本输入。

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

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

设置一个模糊事件来验证密码输入,如果没有输入任何值,则切换回“txtpassword”。

azatoth 14 年前

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

Hacking Life 12 年前

我意识到这已经被标记为“已应答”,但我想使用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;" /

rink.attendant.6 11 年前

我知道了。我在前两个字段之后创建了另一个输入字段,而不是通过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>