[javascript] 키보드 관련 이벤트 / 키보드 이벤트 예제

[javascript] 키보드 관련 이벤트 / 키보드 이벤트 예제

✔️ 키보드 관련 이벤트

: 키보드 이벤트는 키보드와 사용자가 상호 작용하여 발생하는 이벤트를 나타낸다.

👩‍💻 keydown : 키를 눌렀을 때 발생

👩‍💻 keyup : 키를 눌렀다 떼었을 때 발생한다.

👩‍💻 keypress : 키보드를 눌렀을 때 발생 (이 이벤트는 권장x)

: keypress : a키는 97, A키는 65

: keydown, keyup 이벤트는 keyCode 속성으로 대소문자를 구분할 수 없음

: keypress 는 실제 눌러진 키보드를 반환한다.

📓 주요 속성

- altKey : 키 이벤트가 트리거 되었을 때 alt 키 눌렀는지 여부 반환

- ctrlKey : 키 이벤트가 트리거 되었을 때 ctrl 키 눌렀는지 여부 반환

- shiftKey : 키 이벤트가 트리거 되었을 때 shift 키 눌렀는지 여부 반환

- code : 키보드의 실제 키값을 반환한다.

- key : 이벤트로 표시된 키의 키 값을 문자열로 반환한다.

- keyCode : onkeypress 이벤트를 트리거 한 키의 유니코드 문자코드 또는 onkeydown 또는 onkeyup 이벤트를 트리거 한 키의 유니코드의 키 값을 반환한다. (사용 권장 ❌)

const inputs = document.getElementById("inputs");
const layout = document.getElementById("layout");
 
inputs.onkeydown = function(e){
	let keyCode = e.keyCode;
	// a를 누르면 65, A를 누르면 65
	let key = e.key; // 모든 브라우저가 지원하지 않음
		// a를 누르면 'a', A를 누르면 'A'
	let s = "keydown:" + keyCode + ", " + key + "<br>";
	
	layout.innerHTML += s;
}
 
 
// ASCII 관련키에만 발생한다.
inputs.onkeypress = function(e){
	let keyCode = e.keyCode;
	// a를 누르면 97, A를 누르면 65
	let key = e.key; // 모든 브라우저가 지원하지 않음
		// a를 누르면 'a', A를 누르면 'A'
	let s = "keypress:" + keyCode + ", " + key + "<br>";
	
	layout.innerHTML += s;
}
 
 
//ASCII 관련키에만 발생한다.
inputs.onkeyup = function(e){
	let keyCode = e.keyCode;
	// a를 누르면 65, A를 누르면 65
	let key = e.key; // 모든 브라우저가 지원하지 않음
		// a를 누르면 'a', A를 누르면 'A'
	let s = "keyup:" + keyCode + ", " + key + "<br>";
	
	layout.innerHTML += s;
}

💡 onkeyup 과 onkeydown 은 대소문자 구분을 못한다.

✔️ 키보드 이벤트 예제

1) 숫자만 입력가능

2) 영문자만 입력가능

3) 영문, 숫자만 가능

4) 한글만 입력가능

<p> 숫자만 : <input type="text" class="inputNum"></p>
<p> 영문만 : <input type="text" class="inputAlph"></p>
<p> 영문,숫자만 : <input type="text" class="inputAlphNum"></p>
<p> 한글만 : <input type="text" class="inputKor"></p>

1) 숫자만 입력가능

👩‍💻 keyCode 로 입력 값을 받고, 숫자가 아닌 값을 받으면 preventDefault 로 중단한다.

function onlyNumber(e){
	let key = e.key || e.keyCode;
	
	//한글 들어가는거 막을 방법이 없다 ;
	if(key < '0' || key > '9') {
		e.preventDefault();
	}
}

2) 영문자만 입력가능

👩‍💻 유니코드로 a~z , A~Z 사이만 입력되도록 설정한다.

function onlyAlph(e) {
	if((e.keyCode<65 || e.keyCode>90) && (e.keyCode<97 || e.keyCode>122)){
		e.preventDefault();
	}	
}

3) 영문, 숫자만 가능

👩‍💻 \w 는, 영숫자, 언더바, 달러기호 입력되도록 하는 정규식

function onlyAlphNum(e){
	// \w : 정규식(영숫자, _, $)
	if(!/^\w{1}$/.test(e.key) ){
		e.preventDefault();
	}
}

4) 한글만 입력가능

function onlyKorean(e){
	if(e.keyCode < 12592 || e.keyCode > 12687 ){
		e.preventDefault();
	}
}

✔️ 한글 입력되지않도록 지우는 함수

function deleteKorean(e) {
	// bs, tab, <, >, delete
	if(e.keyCode ==8 || e.keyCode ===9 || e.keyCode===37 
			|| e.keyCode===39 || e.keyCode ===46 ){
		return;	
	}
	
	let obj = e.currentTarget;
	//자음, 모음, 한글을 제거
	obj.value = obj.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g, '');
}

✔️ 이후 윈도우 객체에 addEventListener 이벤트 등록(load)

window.addEventListener("load", function(){
	let inputEl;
	
	inputEl = document.querySelector('.inputNum');
	inputEl.addEventListener('keypress', e=> onlyNumber(e));
	inputEl.addEventListener('keyup', e=> deleteKorean(e));
	
 
	inputEl = document.querySelector('.inputAlph');
	inputEl.addEventListener('keypress', e=> onlyAlph(e));
	inputEl.addEventListener('keyup', e=> deleteKorean(e));
	
 
	inputEl = document.querySelector('.inputAlphNum');
	inputEl.addEventListener('keypress', e=> inputAlphNum(e));
	inputEl.addEventListener('keyup', e=> deleteKorean(e));
	
 
	inputEl = document.querySelector('.inputKor');
	inputEl.addEventListener('keypress', e=> onlyKorean(e));
	
	
});

✔️ 한글 입력 제한

<p> 한글 제한 : <input type="text" class="notKorean"> </p>
<p> 한글 제한 : <input type="text" class="notKorean"> </p>
<p> 한글 제한 : <input type="text" class="notKorean"> </p>

const inputEls = document.querySelectorAll(".notKorean");

1) 각각의 input 객체에 input 이벤트를 forEach 로 각각 넣는다. (input 객체 여러개를 받은거라 forEach 사용 가능)

2) 현재 객체를 가리키도록 let obj = e.currentTarget;

3) obj 의 value 값에 한글이 입력되면 지워야하기 때문에 obj.value.replace(/[\W]/g, "")

✨ \W : 영숫자가 아닌 경우 (\w(영문자 숫자...)가 아닌 문자열만 선택한다는것이다.) 

const inputEls = document.querySelectorAll(".notKorean");
 
inputEls.forEach(function(item){
	item.addEventListener('input', function(e){
		let obj = e.currentTarget;
		obj.value = obj.value.replace(/[\W]/g, ""); //\W : 영숫자가 아닌 경우
	});
});