-
jQuery 키보드 이벤트( Keyboard Event) 예제Web/jQuery 2018. 9. 5. 11:08
앞서 jQuery 사이트에서 이벤트 동작법에 대해 학습했다면 코드를 통해 키보드 이벤트 실습.
※모든 jQuery 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문)<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="./layout-vacation.css" /> <title>Vacation Packages</title> <script type="text/javascript" src="./jquery-3.1.1.min.js"></script> <script type="text/javascript"> $().ready(function() { $(".vacation").find(".quantity").keyup(function(){ var inputValue = $(this).val(); // form의 element들만 사용 가능한 함수. 입력한 값이 나옴 var price = $(this).closest(".vacation").data("price"); $("#total").text(inputValue * price); }); }); </script> </head> <body> <fieldset> <legend>Vacations</legend> <h1>jQuery Travels - Trip Planner</h1> <h2>Packages</h2> <div id="vacations"> <div class="vacation" data-price="399.99"> <h2>Hawaiian Vacation</h2> <p>$399.99 per ticket</p> <p> Tickets: <input type="number" class="quantity" value="1" /> </p> </div> </div> <p class="vacationFee"> Total Price: $<span id="total">399.99</span> </p> <p class="call">Call us at 555-25937 to make a reservation today!</p> </fieldset> </body> </html>
$(".vacation").find(".quantity").keyup(function(){
vacation 클래스의 하위 자식 중 quantity 클래스를 가지고 있는 엘레먼트에 keyup 이벤트를 등록한다.
var inputValue = $(this).val();
inputValue에 val() 값을 가져온다. val()은 form의 엘레먼트(input 등)들만 사용 가능한 함수. 해당 엘레먼트의 value를 가져온다. html 파일 보면 quantity 클래스에 해당하는 text에 입력되는 값을 가져온다.
var price = $(this).closest(".vacation").data("price");
price 변수에 해당 이벤트가 발생한 가장 가까운 vacation 엘레먼트의 price 데이터를 가져온다.
$("#total").text(inputValue * price);
total id를 갖는 엘레먼트에 inputValue와 price를 곱한 값을 가져온다.
html 태그에서 inputValue는 키보드 입력값, price는 지역별 가격을 의미한다. 수행 결과1 입력한 결과 1개 패키지 가격
2 개 패키지 가격
10개 패키지 가격 나온다.
'Web > jQuery' 카테고리의 다른 글
jQuery 체크박스(checkbox) 전체선택, 해제 예제 (0) 2018.09.05 jsp페이지에서 jQuery로 체크박스(checkbox) 예외처리, 체크박스 셀렉터 (:checkbox) (0) 2018.09.05 jQuery 마우스(mouse), 키보드(keyboard) 이벤트 제어 (0) 2018.09.05 jQuery 클릭이벤트 다루기 (this, parent, closest) (0) 2018.09.05 jQuery append, prepend, after, before (0) 2018.09.05
