jQuery 키업
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>
위 코드의 출력을 참조하세요.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook