#UI #Enter #로그인 #Key 눌린 경우 #원하는 기능 수행

#UI

#Enter                                     #로그인

#Key 눌린 경우                        #원하는 기능 수행

 

여기서는 'enter key'를 통해 로그인을 하는 경우이지만 

확장해서 생각해보면 '특정 key가 눌린 것'에 반응하여 '원하는 기능을 수행'하는 방법이 될 수 있다.

 

 

 

 

 

 

 

 

<!-- 비밀번호 -->
            <c:set var="title"><spring:message code="comUatUia.loginForm.pw"/></c:set>
            <li>
                <label for="password">${title}</label>
                <input type="password" name="password" id="password" maxlength="12" title="${title} ${inputTxt}" placeholder="${title} ${inputTxt}"
                onkeydown='javascript:onEnterSubmit()'>
            </li>

 

<input>태그의 요소로 onkeydown을 추가한다. onkeydown="javascript:onEnterSubmit()"

/* 

이것이 의미하는 것은 input태그에 포커스가 있는 경우에서 onkeydown 즉, 키입력이 일어났을 경우

javascript의 onEnterSubmit()을 호출하라는 의미이다.

*/

 

 

 

 

 

그럼 javascript로 넘어가서

 

요새(어떤 특정version?)는

<script type="text/javaScript" language="javascript"> 대신

<script>라고만 써도 된다고 하지만 잘 모른다. 아무튼

 

 

 

<script type="text/javaScript" language="javascript">
function onEnterSubmit(){
    var keyCode = window.event.keyCode;
    if(keyCode == 13){
    if (document.loginForm.id.value =="") {
        alert("<spring:message code="comUatUia.validate.idCheck" />"); <%-- 아이디를 입력하세요 --%>
        document.loginForm.id.focus();
    } else if (document.loginForm.password.value =="") {
        alert("<spring:message code="comUatUia.validate.passCheck" />"); <%-- 비밀번호를 입력하세요 --%>
        document.loginForm.password.focus();
    } else {
        document.loginForm.action="<c:url value='/app/login/actionLogin.do'/>";
        //document.loginForm.j_username.value = document.loginForm.userSe.value + document.loginForm.username.value;
        //document.loginForm.action="<c:url value='/j_spring_security_check'/>";
        document.loginForm.submit();
    }
    }
}
</script>

 

 

 

 

 

 

 

 

function

 onEnterSubmit()

호출

 

var keyCode = window.event.keyCode;

어떤 키가 눌렸는지 가져오기(특정 Key가 눌린 것)

(Enter Code = 13)

 

 

 

 

나머지는 로그인을 하기 위한 과정들(원하는 기능 수행)

 

document.loginForm.id.focus();

validation을 통해 유효하지 않은 값일 경우 

loginForm.id에 focus()를 통해 포커스를 준다.