Хобрук: Ваш путь к мастерству в программировании

JQuery, если поле пароля пусто

Я пытаюсь добавить видимый текст в поле пароля с надписью «Введите пароль», и при нажатии текст очищается, и вы вводите точки. У меня есть два входа: один тип = текст и другой пароль. Ввод пароля с самого начала скрыт, но появляется после нажатия на ввод с инструкцией «Введите пароль».

Он делает это http://mudge.github.com/jquery_example/, но я пытаюсь сделать это для полей пароля.

HTML

<input type="text" id="password_instructions" />
<input type="password" id="password" />

Jquery

        var $password = $('#password');
        $password.hide(); //hide input with type=password

        $("#password_instructions").click(function() {
                $( this ).hide();
                $('#password').show();
                $('#password').focus();

                if ($password.val().length === 0) { //if password field is empty            
                    $password.focusout(function() { //when clicking outside empty password input
                        $( this ).hide();
                        $('#password_default_value').show();
                        $('#password_instructions').default_value('Enter a password'); //will clear on click
                    });                     
                }
        });

Что не работает:

Когда вы вводите пароль (с точками) и щелкаете, ввод скрыт, и отображается ввод #password_instruction. Так что это не уважение к пустому оператору if. По какой-то причине он считает ввод пустым, даже если я ввел пароль.

Что я здесь делаю неправильно?

javascript forms input html jquery
09.05.2011

  • Какую версию jQuery вы используете? 09.05.2011
  • Ах, я думал, что прочитал что-то о .val() в новом, но это было о .attr(). Не волнуйтесь. :) 09.05.2011
  • Проверьте этот ответ, он может помочь: stackoverflow.com/a/43185203/1770571 18.09.2017

Ответы:


1

Похоже, вы ожидаете, что после вызова focus() будет какая-то «пауза» и что остаток кода JS будет выполнен только тогда, когда конечный пользователь каким-то образом закончит вводить пароль.

Это неправда. Функция была выполнена полностью за один раз.

Вам нужно переместить следующую часть

        if ($password.val().length === 0) { //if password field is empty            
            $password.focusout(function() { //when clicking outside password input
                $(this).hide();
                $('#password_default_value').show();
                $('#password_instructions').default_value('Enter a password'); //will clear on click
            });                     
        }

в другую автономную функцию:

$('#password').focusout(function() {
    if ($(this).val().length === 0) { //if password field is empty            
        $(this).hide();
        $('#password_default_value').show();
        $('#password_instructions').default_value('Enter a password'); //will clear on click
    }
});
09.05.2011
  • Спасибо за объяснение! Возможно, я слишком сильно связал код с php. Ваша версия работает! :) 10.05.2011

    • 2

    Ты имеешь ввиду:

    <input type="password" placeholder="enter password">

    Если вы хотите реализовать это для устаревших браузеров, вам придется переместить проверку на событие onBlur. В jQuery это выглядит так:

    $('#password').blur(function() {
    if ($password.val().length === 0) { //if password field is empty            
        $password.focusout(function() { //when clicking outside password input
            $( this ).hide();
            $('#password_default_value').show();
            $('#password_instructions').default_value('Enter a password'); //will clear on click
        });                     
    }
});
    09.05.2011
  • Спасибо! Код является заменой заполнителя, который, как я обнаружил, не работает в проводнике :( 09.05.2011
  • А, имеет смысл. Многие люди, кажется, не знают о заполнителе, поэтому я подумал, что лучше сообщить вам об этом! 09.05.2011
  • Спасибо! Я только что узнал об этом в предыдущем вопросе :), но, как обычно, проводник делает это почти незначительным ... люди должны быть обучены, чтобы прекратить использовать проводник 10.05.2011
  • Если вы используете что-то вроде Modernizr с Modernizr.load, вы можете убедиться, что пользователи загружают полифиллы только в том случае, если они необходимы. Здесь есть список github.com/Modernizr/Modernizr/wiki/ для фрагментов кода, которые вы сейчас пишете, для множества функций. 10.05.2011
  • Модернизр - отличная идея! Спасибо за ссылку! 10.05.2011
    • Новые материалы
    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..
    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..
    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..