jQuery 中的输入字段占位符

发布于 2024-09-05 01:01:54 字数 2846 浏览 3 评论 0原文

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

我的“用户名”输入字段有此功能，但“密码”字段给我带来了问题，因为我不能只执行 $("#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>

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

原文

I'm trying to create a Login page, not worrying about actually logging in yet, but I'm trying to achieve the effect where there is some faded text inside the input field and when you click on it, the text disappears or if you click away the text reappears.

I have this working for my "Username" input field, but the "Password" field is giving me problems because I can't just do $("#password").attr("type","password"). Here's my code:

<!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>

Right now, I can click on the password input box and type in it, but the text is not disappearing and the "type" doesn't get set to "password"... the new input field I create isn't being hidden, it just stays visible, and I'm not sure where the problem is. Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳男子 2024-09-12 01:01:54

不要尝试更改密码输入的“类型”，而是将密码输入替换为文本输入。例如，显示值为“Password”的文本输入，而密码输入为“display:none;”。

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

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

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

Instead of trying to change the "type" of the password input, swap the password input with a text input. For example, show a text input with the value "Password" while the password input is "display:none;".

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

Set a focus event on the "txtPassword" to hide the "txtPassword" and show+focus the actual password input.

Set a blur event to validate your password input and swap back to the "txtPassword" if no value has been entered.

回复收藏 0 原文

小苏打饼 2024-09-12 01:01:54

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

回复收藏 0 原文

韬韬不绝 2024-09-12 01:01:54

我意识到这已被标记为已回答，但我想使用 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;" /

I realized this has been marked as answered, but I wanted to expand on uhleeka's solution using onfocus event. Works great for me in IE and other older browsers.

$('#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;" /

回复收藏 0 原文

旧故 2024-09-12 01:01:54

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

I figured it out. I created another input field after the first two instead of creating it via 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>

回复收藏 0 原文

~没有更多了~