[javascript and jQuery] input keypress vs keyup 차이점 및 입력 알아보기

html 문서중에서 input 태그를 사용하는 경우에 키보드 입력이 될 경우에 처리해야할 경우가 많은데요. 특별한 키가 입력되었다 하였을때.. 예를 들어 엔터키가 눌러졌을 경우에 전송 버튼 누른 효과를 한다든지.. 또는 입력되는 값을 조절을 할 경우가 생깁니다.

예를 들어서 주민번호를 예를 들어 설명해 본다면요.. 물론 요즘엔 주민번호 입력은 않되기 때문에 회사 사원번호라고 생각하고 설명해 드리겠습니다.

<input type="number" id="userIDInput">-<input type="number" id="userIDInput2">

위와 같은 input 태그가 있다고 있다고 생각해 보면, 앞의 input 에는 6자리.. 그리고 뒤의 input 에는 7자리로 된 값을 입력받도록 스크립트로 제한을 한다면 어떻게 해야할까요? 우선은 숫자만 입력 받도록 하기 위해서 input 태그는 타입을 number 로 하였습니다. 그리고 이제는 자리수 제한을 해야하는데요.. 

[자리수 제한 조건]

맨 앞에 6자리 입력후에는 자동으로 다음 input 으로 옮겨야 합니다. 그리고 마지막 두번째 input 에는 입력되는 값을 7자리로 제한을 해야합니다.

참고로 keyup 과 keypress 의 차이점은 키보드가 눌린 시점이라고 생각하면 될것 같습니다. keyup 은 키보드가 눌려진 다음에 발생되는 이벤트 라고 한다면 keypress 는 키보드가 눌려질때 발생하는 이벤트라 생각하시면 됩니다. 어떻게 보면 같은 이벤트가 아닌가라고 생각이 들 수 있겠지만요.. 키보드가 눌려졌을때에 값이 입력되기 전과 입력되고 난 후의 차이라고 생각하시면 편할것 같습니다.

맨 첫 6자리의 값은 총 6개의 값이 입력이 되고 난 후에 6자리가 되었다면 그 다음 input 으로 포커스를 이동 처리해야하고..

두번째 input 은 총 7개의 값만 입력이 되어야 합니다.

첫번째 input 은 값이 입력되고 난 후에 자리수를 체크해도 되지만..

두번째 input 은 값이 입력되기 전에 자리수를 체크하여 값이 입력될지 말지를 결정해야 합니다.

따라서 첫번째 input 은 keyup  그리고 두번째 input 은 keypress 이벤트로 처리를 해야합니다.

아래는 예제 코드 입니다.

[예제 코드]

$('#userIDInput').keyup(function (event) {                 // focuse to next input after 6 digits                 var keyCode = event.which || event.keyCode;                 var keyChar = String.fromCharCode((96 <= keyCode && keyCode <= 105) ? keyCode-48 : keyCode);                 var length  = $(this).val().length;                 if(length >=6){                     $('#userIDInput2').focus();                 }                 //console.log(length);                 //console.log(keyCode);                 //console.log(keyChar);             })             $('#userIDInput2').keypress(function (event) {                 var keyCode = event.which || event.keyCode;                 var keyChar = String.fromCharCode((96 <= keyCode && keyCode <= 105) ? keyCode-48 : keyCode);                 var length  = $(this).val().length;                 if(length >=7){                     return false;                 }                 //console.log(length);                 //console.log(keyCode);                 //console.log(keyChar);             })

변수 length 에는 input 값의 문자 길이를 저장합니다. 그리고 다른 input 으로 포커스를 이동할 때에는 focuse() 함수를 사용합니다.

참고로  String.fromCharCode() 함수를 쓰면 입력된 키보드의 keyCode 값이 아닌 입력된 값을 볼 수가 있습니다.