2021-03-24
위와 같은 형식의 텍스트를 입력할 수 있고 우측에 내용을 검색할 수 있는 버튼이 있는 형식이 있다. 이는 구글 / 네이버 / 다음과 같은 웹사이트에서 흔히 볼 수 있다.
여기서의 검색이 진행되는 방식은 흔히 버튼을 누르거나 Enter 키를 통해서 페이지가 넘어가는 형태이다. 이는 한 가지의 동작에 두 가지 방식이 적용되는 형태인데, 이를 구현하는 방법을 알아보자.
- 구현코드
바로 구현 코드를 첨부하였다. 코드의 내용은 버튼을 클릭하면 이벤트가 발생하여, 콘솔 창에서의 해당 input 창에 입력한 내용을 출력하고 알림 창도 뜰 수 있도록 구현하였다.
이후 Enter 키 입력 시에도 구현한 click 이벤트가 발생할 수 있도록 keydown시 클릭 트리거가 발생할 수 있도록 하였다. 여기서 keydown 발생 시 마다 keyCode를 체크하여, 현재 Enter키가 발생되었는지 체크하고 Enter키 발생시 click 이벤트를 불러오는 형식이다. (Enter 키의 키코드는 13이다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var $message = $("#message") //input에 입력된 내용을 가져온다.
$("#mbutton").click(function(){//button 클릭이 발생했을 경우 이벤트발생
console.log($message.val()) // input 에 작성된 내용이 콘솔창에 발생
alert($message.val()) //input 에 작성된 내용이 알림으로 발생
})
$("#message").keydown(function(keyNum){
//현재의 키보드의 입력값을 keyNum으로 받음
if(keyNum.keyCode == 13){
// keydown으로 발생한 keyNum의 숫자체크
// 숫자가 enter의 아스키코드 13과 같으면
// 기존에 정의된 클릭함수를 호출
$("#mbutton").click()
}
})
})
</script>
</head>
<body>
<input type="text" id="message">
<button type="button" id="mbutton">버튼</button>
</body>
</html>- Enter Key Event 소스 코드
아래는 Input 창에 입력된 내용이 Enter키인지 체크하는 소스코드이다. Enter키의 keydown 발생시 실행시키고 싶은 이벤트 및 트리거를 기호에 맞게 if문 안에 넣어주면 된다.
$("#input창에 ID").keydown(function(keyNum){
if(keyNum.keyCode == 13){
//호출하고자 하는 함수트리거 작성
}
})