0

Как сделать форму авторизации? С одним полем login нажимаешь enter, вместо поля логин появляется поле password, наживаешь enter - данные отправляются обработчику?

<style type="text/css">
    form label.hide {
        display: none;
    }
</style>

<script type="text/javascript">
    function sendForm( self ) {

        var hasSend = true;

        for( var i = 0; i < self.length; i++ ) {

            if ( self[i].value ) {

                self[i].parentNode.className = "hide";

            } else {
                self[i].parentNode.className = "";

                self[i].focus();

                hasSend = false;

                break;

            }

        }

        return hasSend;

    }

</script>

<form action="" method="post" onsubmit="return sendForm( this );">
    <label>Login: <input type="text" name="login" /></label>
    <label class="hide">Password: <input type="password" name="password" /></label>  
</form>
3
  • 4
    @zinteco, Согласно правилам форума, вопросы не должны сводиться к решению заданий. Пожалуйста, уточните, что вы сделали сами и что не получилось.
    – Spectre
    Commented 27 сент. 2012 в 12:01
  • исправил...жду вашей помощи...
    – zinteco
    Commented 27 сент. 2012 в 15:08
  • На каком этапе проблема? Проблема показать форму или отправить данные обработчику?
    – Ella S.
    Commented 23 апр. 2015 в 5:12

2 ответа 2

1

Вот функция, которая по очереди показывает несколько блоков, сюда же можно будет засунуть валидацию данных, если это необходимо

function stepShow (collection, callback) {
  var _callback = callback || function () {};
  var currentIndex = 0;
  var currentElement = collection[currentIndex];

  function showElement(el) { 
    el.style.display = 'block';

    el.onchange = function () {
      el.onchange = null; // убираем обработчик с текущего элемента
      el.style.display = 'none'; // скрываем

      if(++currentIndex == collection.length) return _callback();

      currentElement = collection[currentIndex]; // переходим на след. элемент
      showElement(currentElement); // показываем следующий
    };

  }

  showElement(currentElement);  
 }

Демка

0

1) Указать для полей свои ID:

<input id="login" type="text" name="login" />
<input id="password" type="password" name="password" />

2) Написать функцию обработки:

function onEnterPress(e) {
    var keyCode = e.keyCode; // получаем код нажатой клавиши
    var lInput = document.getElementById('login').parentNode; // лейбл логина
    var pInput = document.getElementById('password').parentNode; // лейбл пароля
    if (keyCode == 13) { // если нажат интер
        if (pInput.class == 'hide') { // и пароль спрятан,
            lInput.class = 'hide'; // прячем логин (тут нужна проверка)
            pInput.class = ''; // открываем пароль
        } else { // если мы уже вводим пароль,
            pInput.class = 'hide'; // прячем и его
            lInput.parentNode.submit(); // и отправляем форму
        }
    }
}

3) Установить на них обработчики событий:

document.getElementById('login').addEventListener('keyDown', onEnterPress, false);
document.getElementById('password').addEventListener('keyDown', onEnterPress, false);
2
  • у меня почему-то не работает ваш способ..
    – koza4ok
    Commented 2 дек. 2012 в 6:28
  • Для инпута не обязательно получать код клавиши, что бы убедиться, что нажали Enter, когда на инпуте нажимают Enter срабатывает событие onchagne, его можно использовать
    – ThisMan
    Commented 23 апр. 2015 в 4:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.