Javascript를 통한 키 이벤트 수신 테스트 코드
비망록
추천 : JavaScript로 키 이벤트를 받는 방법을 현역 엔지니어가 해설【초보자용】
참고원의 코드를 실행하면, Shift키나 Ctrl키만을 눌렀을 때 「keydown: Shift + Shift」 「keydown: Ctrl + Control」라고 나와, 조금 모야모야 한다.
그래서 Shift 키나 Ctrl 키만을 눌렀을 때의 콘솔 출력을 변경한다.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('keydown', (event) => {
var keyName = event.key;
if (event.ctrlKey) {
// 処理を変更
if(keyName === "Control"){
console.log(`keydown:Ctrl`);
}else{
console.log(`keydown:Ctrl + ${keyName}`);
}
} else if (event.shiftKey) {
// 処理を変更
if(keyName === "Shift"){
console.log(`keydown:Shift`);
}else{
console.log(`keydown:Shift + ${keyName}`);
}
} else {
console.log(`keydown:${keyName}`);
}
});
document.addEventListener('keypress', (event) => {
var keyName = event.key;
if (event.ctrlKey) {
console.log(`keypress:Ctrl + ${keyName}`);
} else if (event.shiftKey) {
console.log(`keypress:Shift + ${keyName}`);
} else {
console.log(`keypress:${keyName}`);
}
});
</script>
</head>
<body>
</body>
</html>
실행 결과
이것으로 조금 깔끔하게. Shift 혹은 Ctrl키만을 눌렀을 때의 거동을 알기 쉬워졌다.
Reference
이 문제에 관하여(Javascript를 통한 키 이벤트 수신 테스트 코드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/youichi_io/items/bf7ad918ec81ba5d9588텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
