input field placeholder in jQuery

jquery input

11,035

Solution 1

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>

Solution 2

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.

Solution 3

You might want to try a plugin, for example http://plugins.jquery.com/project/inline_label

11,035

Author by

Hristo

LinkedIn JustBeamIt

Updated on June 14, 2022

Comments

Hristo almost 2 years

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?