[JQuery] Form Event

 

이번에는 키보드 및 마우스를 선택 또는 폼 영역에 명령을 내릴 때,  Form에서 일어날 수 있는 이벤트를 정리해보았습니다.

 

 

1. 샘플 예제

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <input id="inputText" type="text" />
    <button id="btnClick">버튼</button>
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

 

2. focus()

 

focus는 각 엘리먼트들이 선택된 것을 나타냅니다.

예를 들어 입력창에 마우스로 클릭을 하면 점선이나 테두리 색이 변화해서 선택되었다는 것을 알수 있게 해줍니다.

 

아래와 같이 input 입력창을 선택했을 때, 선택되었다는 포커스를 줄수도 있습니다.

 

$('#inputText').click(function() {
     $('#inputText').focus();l
});

 

또는 입력을 하고 난 다음, 버튼을 클릭하라고 버튼에 포커스를 줄 수 있습니다.

 

 

3. blur()

 

blur는 focus 와 반대되는 기능입니다.

선택을 하지 않았다는 것을 표시할 때 사용합니다.

 

웹 페이지를 열면 기본적으로 입력창에 포커스가 있는 경우가 있습니다. 이런게 보기 싫은 경우, 포커스를 해제할 필요가 있습니다. 이 때 blur를 사용합니다.

 

$('#inputText').blur();

 

 

4. change()

 

change는 대상의 엘리먼트의 값이 변경될 때 발생합니다.

 

$('#inputText').change(function() {
     console.log("changed")
});

 

 

5. select()

 

select는 엘리먼트가 선택되었을 때, 발생되는 이벤트 입니다.

 

$('#inputText').select(function() {
     console.log("selected")
});

 

 

6. submit()

 

submit은 사용자가 폼 작성을 완료하고 post, get 으로 보내기 작업을 시도할 때 일어납니다.

 

아래와 같이 form 으로 작성된 내용 중, submit 으로 정한 버튼 또는 입력을 했을 때,

 

<form id="form">
    <input type="text"
    <input type="submit">>
</form>

 

아래 스크립트 처럼 submit 명령으로 보내기 명령을 수행할 수 있습니다.

 

$('#form').submit(function() {
    return false;
});

 

 

^ㅇ^!!!

 

Form 이벤트는 특정 브라우저에서 약간 다르게 동작할 수도 있다고 합니다.

인터넷 익스플로러의 경우, 제대로 동작이 안될 때가 많다고 합니다.

 
이 게시물을...