Hi

입력 양식 이벤트 본문

WEB(웹)/jQuery

입력 양식 이벤트

SharingWorld 2018. 7. 2. 23:45

입력 양식 이벤트

이벤트 이름설명
change입력 양식의 내용을 변경할 때 발생합니다.
focus입력 양식에 초점을 맞추면 발생합니다.
focusin입력 양식에 초점이 맞추어지기 바로 전에 발생합니다.
focusout입력 양식에 초점이 사라지기 바로 전에 발생합니다
blur입력 양식에 초점이 사라지면 발생합니다.
select입력 양식을 선택할 때 발생합니다(input[type="text"] 태그 및 textarea 태그 제외)
submitsubmit 버튼을 누르면 발생합니다.
resetreset 버튼을 누르면 발생합니다.


ex)

<body>
	<form id="my-form">
		<table>
			<tr>
				<td>이름 : </td>
				<td><input type="text" name="name" id="name" /></td>
			</tr>
			<tr>
				<td>비밀번호: </td>
				<td><input type="password" name="password" id="password" /></td>
			</tr>
		</table>
		<input type="submit" value="제출" />
	</form>
</body>

submit 이벤트는 form 태그에서 발생하는 이벤트

$(document).ready(function() {
	$('#my-form').submit(function(event) {
		// 입력 양식의 value를 가져옵니다.
		var name = $('#name').val();
		var password = $('#password').val();

		// 출력합니다.
		alert(name + ' : ' + password);

		//기본 이벤트를 제거합니다.
		event.preventDefault();
	});
});



type 속성이 checkbox와 radio인 input 태그의 상태를 변경하는 이벤트는 click 이벤트가 아니라 change 이벤트 입니다.

<script>
	$(document).ready(function() {
		$('#all-check').change(function() {
			if (this.checked) {
				$('#check-item').children().prop('checked', true);
			}
			else {
				$('#check-item').children().prop('checked', false);
			}
		});
	});
</script>
<body>
	<input type="checkbox" id="all-check" />
	<label>All</label>
	<div id="check-item">
		<input type="checkbox" />
		<label>A Option</label>
		<input type="checkbox" />
		<label>B Option</label>
		<input type="checkbox" />
		<label>C Option</label>
	</div>
</body>

체크 상태를 확인할 때는 입력 객체의 checked 속성을 확인하고, 체크 상태를 바꿀 때는 prop() 메서드를 사용합니다.

'WEB(웹) > jQuery' 카테고리의 다른 글

윈도우 이벤트  (0) 2018.07.02
키보드 이벤트  (0) 2018.07.02
마우스 이벤트  (0) 2018.07.02
이벤트 연결 범위 한정  (0) 2018.07.02
기본 이벤트와 이벤트 전달  (0) 2018.07.02
'WEB(웹)/jQuery' Related Articles more