키보드 이벤트
<body>
<h1 id="first"></h1>
<script>
// 화면에 키보드를 입력하면 h1에 입력한 key가 들어가도록 해보기
document.body.addEventListener("keyup", () => {
alert("키보드를 눌렀습니다");
});
</script>
</body>
키 확인하기
<body>
<h1 id="first"></h1>
<script>
// 화면에 키보드를 입력하면 h1에 입력한 key가 들어가도록 해보기
document.body.addEventListener("keyup", (event) => {
console.log(event);
});
</script>
</body>
화면에 눌렀던 키 띄우기
<body>
<h1 id="first"></h1>
<script>
// 화면에 키보드를 입력하면 h1에 입력한 key가 들어가도록 해보기
document.body.addEventListener("keyup", (event) => {
const first = document.querySelector("#first");
first.innerHTML = event.key;
});
</script>
</body>
<script>
// 화면에 키보드를 입력하면 h1에 입력한 key가 들어가도록 해보기
document.body.addEventListener("keyup", (event) => {
const first = document.querySelector("#first");
first.innerHTML = first.innerHTML + event.key;
});
</script>
단축키 만들기
document.body.addEventListener("keyup", (event) => {
console.log(event);
});
Alt + a 를 누르면 a 키에 altKey가 true인 상태로 눌렸다고 나온다.
* ctrl + i 입력시 alert 띄우기
// 단축키 만들기
document.body.addEventListener("keyup", (event) => {
// ctrl + i 를 사용하면 alert("ctrl + i") 창 출력
console.log(event);
console.log(event.key);
if (event.ctrlKey && event.code === "KeyI") {
alert("ctrl + i");
}
});
'프로그래밍 언어와 기술 > JavaScript' 카테고리의 다른 글
| [JavaScript] 실습 - 배경이 흰색, 검정색으로 바뀌는 토글버튼 만들기 (0) | 2023.07.12 |
|---|---|
| [JavaScript] localStorage (0) | 2023.07.12 |
| [JavaScript] 마우스 이벤트(태그에 기능 추가, 삭제) (0) | 2023.07.12 |
| [JavaScript] 스타일 변경 (0) | 2023.07.12 |
| [JavaScript] 태그 넣기, insertAdjacentHTML (0) | 2023.07.12 |