keyUp 실습
<style type="text/css"></style>
<script src="./jquery-3.7.1.js"></script>
<script type="text/javascript">
$().ready(function(){
$("body").keyup(function(event){
console.log("Key", event.key)
console.log("ShiftKey", event.shiftKey)
console.log("CtrlKey", event.ctrlKey)
console.log("AltKey", event.metaKey)
console.log("KeyCode", event.keyCode)
var div= $("<div></div>")
div.text(event.key)
$(this).append(div)
})
})
</script>
Input Keyup 실습
데이터 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Keyup 실습</title>
<style type="text/css">
body{
background-color: #444;
margin: 10px;
}
*{
color: #FFF;
}
div{
background-color: #0006;
padding: 10px;
width: 200px;
}
input{
color: #333;
}
</style>
<script src="./jquery-3.7.1.js"></script>
<script type="text/javascript">
$().ready(function(){
var price = $("div").data("price")
$(".ticket_price, .amount").text(price)
$(".ticket_size").keyup(function(){
//input tag의 값을 가져올 떄엔 val() getter 사용
var ticketCount=$(this).val()
var amount=price*ticketCount
$(".amount").text(amount)
}).change(function(){
$(this).keyup()
})
})
</script>
</head>
<body>
<h1>jquery Travels - Trip Planner</h1>
<h2>Packages</h2>
<div data-price="100">
<h3>Hawaiian Vacation</h3>
<p>$<span class="ticket_price"></span> per ticket</p>
<p>Tickets:</p>
<input type="number" class="ticket_size" value="1" />
</div>
<p>Total Price:$<span class="amount"></span></p>
</body>
</html>
