JS Authorization Form

Question

JS Authorization Form

How do I make an authorization form? With one login field, you press enter, the password field appears instead of the login field, you press enter - the data is sent to the handler?

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

0

html javascript авторизация форма

Author: zinteco, 2012-09-27

Source

2 answers

score 1 · Answer 1

Here is a function that shows several blocks in turn, and you can also put data validation here, if necessary

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);  
 }

Demo

score 0 · Answer 2

1) Specify your own IDs for the fields:

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

2) Write a processing function:

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) Install event handlers on them:

document.getElementById('login').addEventListener('keyDown', onEnterPress, false);
document.getElementById('password').addEventListener('keyDown', onEnterPress, false);