像Google一样的登录页面，带回退按钮

我有一个登录页面，如果用户输入了其用户名，则向服务器发送发布请求，验证用户名并提供适当的响应。如果用户名有效，则显示密码的新输入字段。我希望用户能够返回到用户名输入，但是因为我使用ajax和javascript在验证用户名后显示密码的新输入字段，所以后退按钮只是跳过用户名输入。像Google一样的登录页面，带回退按钮

当输入电子邮件后按下后退按钮并且“重定向到”密码输入时，Google登录页面的行为正是我想要的。

我该如何达到相同的行为？

谢谢。

来源

2016-11-09 nauti

当您输入电子邮件ID Gmail网址是这样的：

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

我的想法，但我如何完成在地址栏这个哈希变化？我必须从服务器发送什么？编辑：我明白了。我读过它^^ – nauti

页面的第一个网址：something.com＃uname（默认情况下，会显示用户名区域）单击下一个按钮后，将网址设置为something.com＃密码并处理“hashchange”事件事件监听器。 –

谢谢，工作正常，但我们需要window.location.hash ===“＃密码”。（注意＃）:) – 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一样的登录页面，带回退按钮

回答

相关问题