Page de connexion comme Google avec bouton de retour

J'ai une page de connexion et si l'utilisateur entre son nom d'utilisateur une demande de publication au serveur valide le nom d'utilisateur et fournit une réponse appropriée. Si le nom d'utilisateur était valide, un nouveau champ de saisie apparaît pour le mot de passe. Je veux que l'utilisateur puisse revenir à l'entrée pour le nom d'utilisateur mais parce que j'utilise ajax et javascript pour afficher le nouveau champ d'entrée pour le mot de passe après que le nom d'utilisateur a été validé, le bouton arrière ignore l'entrée de nom d'utilisateur.Page de connexion comme Google avec bouton de retour

Le comportement de la page de connexion de Google quand on appuie sur le bouton de retour après avoir entré l'email et est "redirigé" à l'entrée de mot de passe est exactement ce que je veux.

Comment puis-je obtenir le même comportement?

Merci.

Source

2016-11-09 nauti

Lorsque vous entrez email id l'url gmail est comme:

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

Et lorsque le mot de passe:

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

Regardez le changement est que la balise de hachage à la fin de l'URL. Maintenant, comment allez-vous implémenter cela?

Il y a un événement en javascript appelé "hashchange".

Jetez un oeil à ceci:

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

Source

2016-11-09 13:06:19

J'ai l'idée, mais comment puis-je accomplir ce changement de hachage dans la ligne d'adresse? Que dois-je envoyer du serveur? EDIT: Je l'ai eu. J'ai lu par-dessus ^^ – nauti

Première url de la page: something.com # uname (par défaut la zone du nom d'utilisateur sera montrée) après avoir cliqué sur le bouton suivant faire de l'url quelque chose.com # mot de passe et gérer l'événement sur "hashchange" écouteur d'événement. –

Merci qui fonctionne bien, mais nous devons window.location.hash === "# mot de passe". (Notez le #) :) – nauti

Vous pouvez créer deux conteneurs comme celui-ci

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

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

initiale, le .password-input doit être caché. Et après la validation du nom d'utilisateur, vous pouvez slideToggle() à la prochaine validation requise étant le mot de passe. Si votre réponse ajax est true, vous pouvez ajouter <input type="password" name="password"> avec le bouton de retour à .password-input.

Lorsque vous appuyez sur le bouton de retour, après la .password-input a montré, vous pouvez simplement supprimer le joint <input type="password" name="password">, cacher le dos .password-input et slideToggle() la première forme de validation étant .username-input.

Ceci est juste une pensée, et peut facilement être accompli avec javascript.

Source

2016-11-09 12:59:58

Page de connexion comme Google avec bouton de retour

Répondre

Questions connexes