Страница входа, как Google с кнопкой «назад»

У меня есть страница входа в систему, и если пользователь вводит свое имя пользователя, запрос на отправку на сервер проверяет имя пользователя и дает соответствующий ответ. Если имя пользователя было действительным, появляется новое поле ввода для пароля. Я хочу, чтобы пользователь мог вернуться на вход для имени пользователя, но поскольку я использую ajax и javascript для отображения нового поля ввода для пароля после подтверждения имени пользователя, кнопка «Назад» просто пропускает ввод имени пользователя.Страница входа, как Google с кнопкой «назад»

Поведение страницы входа в систему Googles при нажатии кнопки «Назад» после ввода адреса электронной почты и «перенаправлено» на ввод пароля - именно то, что я хочу.

Как я могу достичь такого же поведения?

Спасибо.

источник

2016-11-09 nauti

При вводе электронной почты идентификатор Gmail URL, как:

https://accounts.google.com/ServiceLogin?sacu=1&scc=1&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&osid=1&service=mail&ss=1&ltmpl=default&rm=false#identifier

И когда пароль:

https://accounts.google.com/ServiceLogin?sacu=1&scc=1&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&osid=1&service=mail&ss=1&ltmpl=default&rm=false#password

Посмотрите изменение только хэш-тег в самом конце URL. Теперь, как вы это реализуете?

В javascript есть событие «hashchange».

Взгляни на это:

<html> 
<head> 
    <title>Text</title> 
</head> 

<body> 

    <div id="uname"> 
     //username related code 


     <a href="#password"><div id="hello">Next</div></a> 
    </div> 


    <div id="password" style="display:none"> 
     //username related code 


     <div id="final">Submit</div> 
    </div> 

    <script> 

     window.onload=function(){ 

       window.addEventListener("hashchange", function(){            //this is the trick 
         console.log("Hash changed to", window.location.hash); 

         if(window.location.hash=="password") 
          //show password related div 
         else 
          //show username related div 
        }); 
      } 

    </script> 
</body>

источник

2016-11-09 13:06:19

Я получаю эту идею, но как я выполнить это изменение хэша в адресной строке? Что мне нужно отправить с сервера? EDIT: Я понял. Я прочитал его ^^ – nauti

Первый URL-адрес страницы: something.com # uname (по умолчанию будет отображаться область имени пользователя) после нажатия следующей кнопки сделать url как something.com # password и обработать событие на "hashchange" прослушиватель событий. –

Спасибо, что работает отлично, но нам нужно window.location.hash === "# password". (Обратите внимание на #) :) – nauti

Вы можете создать два контейнера, как этот

<div class="username-input"> 
    <input type="text" name="username" value=""> 
    <button>Next</button> 
</div> 

<div class="password-input"></div>

парафировать .password-input должны быть скрыты. И после проверки имени пользователя вы можете указать slideToggle() следующей требуемой проверке, являющейся паролем. Если ваш ответ ajax true, вы можете добавить <input type="password" name="password"> вместе с кнопкой возврата на .password-input.

При нажатии на кнопку назад, после того, как .password-input показал, вы можете просто удалить прилагаемую <input type="password" name="password">, скрыть .password-input и slideToggle() назад первая форма проверки будучи .username-input.

Это просто мысль и может быть легко выполнена с помощью javascript.

источник

2016-11-09 12:59:58

Страница входа, как Google с кнопкой «назад»

ответ

Смежные вопросы