заполнитель поля ввода в jQuery - PullRequest
Новая
       6

заполнитель поля ввода в jQuery

2 голосов
/ 09 июня 2010

Я пытаюсь создать страницу входа в систему, не беспокоясь о самом входе в систему, но я пытаюсь добиться эффекта, когда внутри поля ввода появляется какой-то блеклый текст, и когда вы нажимаете на него, текст исчезаетили если вы щелкнете мышью, текст снова появится.

У меня это работает для моего поля ввода имени пользователя, но поле "Пароль" вызывает у меня проблемы, потому что я не могу просто сделать $("#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»... новое поле ввода, которое я создаю, не скрыто, оно просто остается видимым, и я не уверен, в чем проблема.Есть идеи?

Ответы [ 4 ]

4 голосов
/ 09 июня 2010

Вместо того чтобы пытаться изменить «тип» ввода пароля, поменяйте местами ввод пароля с помощью ввода текста. Например, показать текстовый ввод со значением «Пароль», в то время как ввод пароля «display: none;». 

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

Установите событие фокуса на «txtPassword», чтобы скрыть «txtPassword» и показать + сфокусировать фактический ввод пароля.

Установите событие размытия, чтобы подтвердить ввод пароля и вернуться к «txtPassword», если значение не было введено.

2 голосов
/ 09 июня 2010

Возможно, вы захотите попробовать плагин, например http://plugins.jquery.com/project/inline_label

0 голосов
/ 24 марта 2012

Я понял, что это было помечено как ответ, но я хотел бы расширить решение uhleeka, используя событие onfocus.Отлично работает для меня в 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;" /
0 голосов
/ 09 июня 2010

Я понял это.Я создал другое поле ввода после первых двух вместо того, чтобы создавать его через jQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...