티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 입력 양식 - 이벤트

좋은 블로그 2016. 10. 24. 11:34

1. 입력양식 이벤트 - 역할

입력양식 반응에 따른 이벤트


2. 입력양식 이벤트  - 정리

이벤트 이름

설명

change

내용이 변경할 때

focus

초점을 맞출 때

focusin

초점을 맞추어지기 바로 전

focusout

초점이 사라지기 바로 전

blur

초점이 사라지면

select

선택할 때(text 타입,textarea 제외)

 submit

submit 버튼을 누를 때 

 reset

reset 버튼을 누를 때 


3. 입력양식 이벤트  - 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script>
$(document).ready(function () 
{
    $("#test").change(function (event){
        alert($(this).val());
    });
});
</script>
 
<body>
    <input type="text" id="test">
</body>


 





◈ 결과화면




◈ 설명


텍스트를 입력하고 테스트 내용이 변경되었을 때에만 alert 창 이벤트가 발생합니다






4. 입력양식 이벤트  - 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script>
$(document).ready(function () 
{
    $("#test").focus(function (event){
        alert($(this).val());
    });
});
</script>
 
<body>
    <input type="text" id="test">
</body>


 


◈ 결과화면




◈ 설명


입력 창에 초점만 맞춰지면 계속 alert 창이 표시합니다




'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] animate() - 사용자 지정효과  (0) 2016.10.24
[jquery] fade 이벤트 - 사라졌다 나타나기  (0) 2016.10.24
[jquery] 윈도 - 이벤트 정리  (0) 2016.10.20
[jquery] 키보드 - 이벤트 정리  (0) 2016.10.20
[jquery] 마우스 - 이벤트 정리  (0) 2016.10.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday