반응형
KeyboardEvent keyCode
<!DOCTYPE html>
<html>
<body>
<h1>Keyboard Events</h1>
<h2>The keyCode Property</h2>
<p>Press a keyboard key in the input field and display the value:</p>
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<p>The keyCode property is deprecated, use the key property instead.</p>
<script>
function myFunction(event) {
let value= event.which;
document.getElementById("demo").innerHTML = value;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#inp").keypress(function(e){
//검색어 입력 후 엔터키 입력하면 조회버튼 클릭
if(e.keyCode && e.keyCode == 13){
$("#btn").trigger("click");
return false;
}
//엔터키 막기
if(e.keyCode && e.keyCode == 13){
e.preventDefault();
}
});
$("#btn").click(function(){
alert("이벤트 감지");
});
});
</script>
<input type="text" class="form-control input-sm" id="inp" name="inp">
<button type="button" class="btn btn-primary btn-sm" id="btn" name="btn">조회</button>
</body>
</html>
반응형
'프로그래밍 > Script' 카테고리의 다른 글
| [jQuery] jQuery .data() (0) | 2023.05.30 |
|---|---|
| [javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인 (0) | 2023.05.26 |
| [VS Code] 인코딩 변경 (0) | 2023.05.09 |
| [ javascript ] CDATA 사용 이유 (0) | 2023.05.08 |
| 9 Projects You Can Do to Become a Front-End Master in 2023 (0) | 2022.11.02 |