HOWTO · jQuery
jQuery 키업
이 튜토리얼은 jQuery에서 keyup 이벤트를 사용하는 방법을 보여줍니다.
jQuery의 keyup() 메서드는 키보드에서 키를 놓을 때마다 JavaScript의 keyup 이벤트를 트리거합니다. 이 튜토리얼은 jQuery에서 keyup() 메소드를 사용하는 방법을 보여줍니다.
jQuery 키업
keyup() 메서드는 키보드에서 키를 놓을 때 keyup 이벤트를 트리거합니다. 이 방법은 키보드에서 키가 해제되었는지 감지하는 데 사용됩니다.
이 메서드의 구문은 다음과 같습니다.
$(selector).keyup(function)
여기서 selector는 id, 클래스 또는 요소 이름이 될 수 있고 function은 키가 눌렸는지 여부를 알려주는 선택적 매개변수입니다. 이 메서드의 반환 값은 키가 눌렸는지 여부입니다.
그에 따라 배경색이 변경됩니다. keyup() 메서드에 대한 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery keyup() Method</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "lightblue");
});
$("input").keyup(function(){
$("input").css("background-color", "lightgreen");
});
});
</script>
</head>
<body>
Type Something: <input type="text">
</body>
</html>
위의 코드는 키를 놓으면 입력 필드의 배경색을 밝은 녹색으로 변경하고 키를 눌렀을 때 밝은 파란색으로 변경합니다. 출력 참조:
키를 놓을 때마다 div의 배경색을 변경하는 다른 예를 시도해 보겠습니다. 예를 참조하십시오.
<html>
<head>
<title>jQuery keyup() Method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
div {
width: 700px;
height: 500px;
padding: 30px;
font-size: large;
text-align: center;
margin: auto;
font-weight: bold;
border: 5px solid cornflowerblue;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
<script>
var colors = ["lightblue", "lightgreen", "violet", "lightpink", "red", "forestgreen", "white", "indigo"];
var i = 0;
$(document).keyup(function(event) {
$("div").css("background-color", colors[i]);
i++;
i = i % 9;
});
</script>
<body>
<br />
<br />
<div>
<h1 style="color:teal; font-size:x-large; font-weight: bold;"> jQuery keyup event </h1>
<p style="color:maroon; font-size: large;">
Press and release the space or any other key <br /> The background of the div will change </p>
</div>
</body>
</html>
위 코드의 출력을 참조하세요.
