jQuery 비밀번호 로그인 양식

Question

로그인 상자가있는 매우 간단한 페이지 ('안전'할 필요 없음)를 만들려고합니다.

사용자가 암호를 입력하면 버튼을 특정 URL로 이동합니다. 암호가 틀리면 경보가 표시됩니다.

이것은 지금까지 제 코드입니다.

$(document).ready(function() { 
 
    $('.login').click(function() { 
 
    if ($('input:password').val() == "hello") { 
 
     alert('Right Password!'); 
 
    else 
 
     alert('Wrong Password!'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="password" id="password" /> 
 
    <input type="button" class="login" value="Continue" /> 
 
</form>

나는 내 코드가 할 것으로 예상 무엇 : 가 경우를 확인하기 위해 .login에 클릭 기능을 넣어 : 암호가 '안녕하세요'다음 URL로 이동 같다 (테스트 목적으로 경고 사용) 또는 : 경고 메시지.

문제점 내가 가지고있는 것 : 버튼에 대한 현재 응답이 없습니다. 입력란을 채운 후에 엔터를 누르면 페이지가 다시로드됩니다. 내 사용자가 Enter 키를 사용하여 버튼을 트리거 할 수있게하려면이 방법을 사용할 수 있습니까?

내 몸을 끝내기 전에 스크립트를로드하고 내 머리에서 라이브러리를 호출합니다.

Answer 1

당신은 }else{ 누락 및 입력을 위해 당신은 keyup()을 사용하고 .login 버튼 클릭 트리거 event.keyCode을 사용하여 누를 때 키 감지 할 수 있습니다 : 들어

$(document).ready(function() { 
 
    $('.login').click(function() { 
 
    if ($('input:password').val() == "hello") { 
 
     alert('Right Password!'); 
 
    } else { 
 
     alert('Wrong Password!'); 
 
    } 
 
    }); 
 
    $('input:password').keyup(function(event) { 
 
    event.preventDefault(); 
 
    if (event.keyCode == 13) { 
 
     $('.login').click(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="password" id="password" /> 
 
    <input type="button" class="login" value="Continue" /> 
 
</form>

을 리디렉션하려면 url을 사용할 수 있습니다. window.location.href = 'your url goes here';

Answer 2

Basicall 문제는 을 입력하면 필드에 페이지를 다시로드에서 작성 후 누르면 아래의 코드를

$(document).ready(function() { 
    $('.login').click(function() { 
    if ($('input:password').val() == "hello") { 
     alert('Right Password!'); 
    } else { 
     alert('Wrong Password!'); 
    } 
    }); 
}); 

Answer 3

을 work.Try하지 않습니다이 코드의 { brace.Because 누락입니다 Y.(가) 키를 입력 클릭에

페이지를 다시로드의 form이 가를 제출 그대로 - 당신이 비활성화이 사용 할 수있는 :

가

$("form").submit(function(event) { 
    event.preventDefault(); 
}); 

(조각에 그 주, 제한으로 인해을 확인할 수 없습니다.

뿐만 아니라 엔터 키를들을 에, 당신이 사용할 수 있습니다

$('input:password').keyup(function(event) { 
    if (event.keyCode == 13) { 
    $('.login').click(); // trigger click 
    } 
}); 

을 데모 아래를 참조

$(document).ready(function() { 
 

 
    // this prevents page reload on pressing enter 
 
    $("form").submit(function(event) { 
 
    event.preventDefault(); 
 
    }); 
 

 
    // click listener 
 
    $('.login').click(function() { 
 
    if ($('input:password').val() == "hello") { 
 
     alert('Right Password!'); 
 
    } else { 
 
     alert('Wrong Password!'); 
 
    } 
 
    }); 
 

 
    // respond to enter key 
 
    $('input:password').keyup(function(event) { 
 
    if (event.keyCode == 13) { 
 
     $('.login').click(); // trigger click 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <input type="password" id="password" /> 
 
    <input type="button" class="login" value="Continue" /> 
 
</form>