키보드 이벤트 중 onkeydown 이벤트는 키보드가 눌렸을 때 발생한다. html 태그에 keydown 이벤트가 적용되면 그 영역에서 키보드의 어떤 부분이 눌리던 반응하고 동작한다. 보통 오탈자방지를 위한 장치로 사용되거나 자동검색어와 같은 기능 등 추가적인 정보나 안내를 위해 또는 키보드 작업이 많은 웹페이지에서 사용된다.
자바스크립트 키다운 이벤트 사용
javascript onkeydown event
홈페이지에서 입력란에 키보드로 글자를 치면 자동완성어같은 목록이 나열되거나 글자의 오탈자를 방지하는 메세지들이 나타난다.
이것들은 자바스크립트 키보드 이벤트에 해당한다.
여러가지가 있지만 onkeydown 이 가장 많이 사용된다.
onkeydown 은 키보가 눌려을 때 반응하는 이벤트이다.
onkeydown 키보드 이벤트
키보드를 누르면 이벤트가 발생한다.
뭔지는 모르지만 사용자는 그에 따라 움직이도록 유도할 수 있다.
키보드 이벤트 중 onkeydown 이벤트는 입력란에 사용자가 입력을 하면 동작을 한다.
회원가입할 때 입력의 오탈자를 방지할 수 있다.
검색을 할 때는 단어들을 제시한다.
이것은 사용자들로 하여금 정보를 빠르게 찾을 수 있도록 해준다.
사용법
onkeydown 이벤트도 다른 이벤트들과 마찬가지로 태그와 함께 사용된다.
보통 입력란에 자주 사용된다.
<tag onkeydown="메서드명" />샘플코드
위에서 언급한 대로 코드를 작성해 본다.
입력란에 자주 사용되기 때문에 입력을 위한 텍스트박스를 사용한다.
코드를 보자.
onkeydown을 이용해 이벤트를 적용했다.
키보드를 누르면 p id="txt" 에 입력태그에 입력된 글자를 입력하도록 하였다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 이벤트</h1>
<p>
<input type="text" id="intxt" onkeydown="return fnEvtKyDwnTxt(this);" onkeyup="return fnEvtKyUpTxt(this);" />
</p>
<p id="txt">
</p>
<script>
function fnEvtKyDwnTxt(ptag){
console.log("KeyDown", ptag.value);
}
function fnEvtKyUpTxt(ptag){
console.log("KeyUp", ptag.value);
}
</script>
</body>
</html>여기서 onkeyup 이벤트와 함께 사용된 점을 보자.
onkeydown과 onkeyup 이벤트의 동작이 조금 다르다.
결과화면을 보자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 문자열 선언과 사용하기 javascript string (0) | 2021.11.02 |
|---|---|
| 자바스크립트 로드 이벤트 javascript onLoad Event (0) | 2021.11.02 |
| 자바스크립트 마우스아웃 이벤트 사용 javascript onmouseout event (0) | 2021.11.01 |
| 자바스크립트 마우스오버 이벤트 사용 javascript onmouseover event (0) | 2021.10.30 |
| 자바스크립트 체인지 이벤트 사용하기 javascript onchange event (0) | 2021.10.30 |
댓글