form 이벤트 - onfocus / onblur

onfocus: 요소가 focus 되었을때 발생하는 이벤트이다. 마우스로 선택되거나 입력 커서가 해당 요소에 위치할때 발생한다. onblur: focus 이벤트의 반대 개념으로 요소에서 포커스가 없어질 때 발생하는 이벤트이다. 즉, 요소가 마우스 선택이 해제되거나 입력 커서가 다른 곳으로 이동할 때 발생한다.

 

💐 onfocus / onblur 이벤트 핸들러

onfocus와 onblur 이벤트 핸들러

아이디

function showMessage(message){
	document.getElementById("msg").innerHTML = message;
}
			
function dataChange(){
	let data = document.getElementById("id");
	data.value = data.value.toLowerCase(); // 입력 데이터 소문자 변환
}

<h1>onfocus와 onblur 이벤트 핸들러</h1>
<form name="form4" id="form4">
	<label>아이디 </label>
	<input type="text" name="id" id="id" maxlength="12" onfocus="showMessage('아이디 입력해 주세요')" 
	onblur="showMessage('사용 가능한 아이디입니다.')" onchange="dataChange()" />
	<span id="msg"></span>
</form>

ㅁ