로그인 페이지가 뒤로 가기 버튼이있는 Google과 같습니다.

로그인 페이지가 있으며 사용자가 사용자 이름을 입력하면 서버에 대한 게시물 요청이 사용자 이름의 유효성을 검사하고 적절한 응답을 제공합니다. 사용자 이름이 유효하면 암호의 새 입력 필드가 나타납니다. 나는 사용자가 사용자 이름에 대한 입력으로 돌아갈 수 있기를 원하지만 사용자 이름이 검증 된 후에 암호에 대한 새로운 입력 필드를 표시하기 위해 ajax와 javascript를 사용하기 때문에 뒤로 버튼은 사용자 이름 입력을 건너 뜁니다.로그인 페이지가 뒤로 가기 버튼이있는 Google과 같습니다.

전자 메일을 입력 한 후 뒤로 버튼을 누르고 "비밀번호 입력"으로 "리디렉션"되는 동작은 원하는 것입니다.

어떻게하면 동일한 동작을 얻을 수 있습니까?

감사합니다.

출처

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

이 한 번 봐? 서버에서 무엇을 보내야합니까? 편집 : 알겠습니다. 나는 그것을 읽었습니다. ^^ – nauti

페이지의 첫 번째 URL : 다음 버튼을 클릭 한 후 something.com # uname (기본적으로 사용자 이름 영역이 표시됨)이 url을 something.com # password로 만들고 "hashchange"에서 이벤트를 처리합니다. 이벤트 리스너. –

잘 작동하지만, window.location.hash === "password"가 필요합니다. (# 참고) :) – nauti

당신은 .password-input가 숨겨져 야 초기이

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

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

같은 두 개의 컨테이너를 만들 수 있습니다. 그리고 사용자 이름의 유효성을 확인한 후에는 slideToggle()을 사용하여 다음에 필요한 유효성 검사가 암호가 될 수 있습니다. 아약스 응답이 true 인 경우 <input type="password" name="password">을 뒤로 버튼 .password-input에 추가 할 수 있습니다.

.password-input가 나타났다 후, 다시 버튼을 누르면, 당신은 단지, 첨부 된 <input type="password" name="password">를 제거 .password-input 및 slideToggle() 다시 첫번째 검증 양식이되는 .username-input을 숨길 수 있습니다.

이것은 단순한 생각이며 자바 스크립트로 쉽게 수행 할 수 있습니다. 이메일 ID를 입력하면

출처

2016-11-09 12:59:58

로그인 페이지가 뒤로 가기 버튼이있는 Google과 같습니다.

답변

관련 문제