JS - 폼 이벤트

폼 이벤트에는 다양한 이벤트를 제공합니다.

이벤트	설 명
onblur	폼 요소에서 포커스를 잃었을 때
onfocus	폼 요소가 포커스 되었을 때
onfocusin	폼 요소(또는 자식요소)가 포커스 되었을 때
onfocusout	폼 요소(또는 자식요소)가 포커스를 잃었을 때
onchange	폼 요소의 입력 값이 변경되었을 때
oninput	폼 요소에 사용자로부터 입력 받을 때
oninvalid	폼 요소의 유효성을 검증할 때 유효하지 않을 때
onsearch	검색(<input type="search">)에서 엔터나 x표를 눌렀을 때
onselect	해당 요소의 내용을 선택했을 때
onsubmit	폼 내용을 전송할 때
onreset	폼 내용을 리셋할 때

onblur, onfocus

입력 필드에 포커스를 주었을 때는 배경색이 노란색으로 변하고, 포커스를 잃었을 때는 빨간색으로 변합니다.

<input type="text" id="user" name="user">

<script>
var frm = document.getElementById("user");
frm.addEventListener("focus", mfocus);
frm.addEventListener("blur", mblur);


// 포커스되었을 때
function mfocus() {
  frm.style.background = "yellow";
}
// 포커스를 옮겼을 때
function mblur() {
  frm.style.background = "red";
}
</script>

onfocusin, onfocusout

폼의 자식요소가 포커스 되었거나 잃었을 때 이벤트가 발생합니다.

<form id="frm">
  <input type="text" name="user">
  <input type="password" name="pass">
</form>

<script>
var frm = document.getElementById('frm');

frm.addEventListener('focusin', function(e){
  e.target.style.background = 'pink';    
});

frm.addEventListener('focusout', function(e){
  e.target.style.background = '';    
});
</script>

oninvalid

폼 요소의 유효성을 검증합니다. 예를 들어 필수 항목을 생략하거나 이메일을 입력받는 필드에 유효하지 않은 이메일을 넣고 전송을 했을 때 이벤트가 발생합니다.

<form>
<input type="email" id="emails" name="emails">
<input type="text" id="user" name="user" required>
<input type="submit" value="전송">
</form>

<script>
var frm = document.getElementById("emails");
frm.addEventListener("invalid", minvalid);

var frm2 = document.getElementById("user");
frm2.addEventListener("invalid", minvalid2);

function minvalid() {
  alert("유효한 이메일을 입력해 주세요.");
}
function minvalid2() {
  alert("사용자를 입력해 주세요.");
}
</script>

onsearch

검색할 단어를 넣고 엔터를 치거나 오른쪽에 나오는 "X" 버튼을 누르면 이벤트가 발생합니다.

<input type="search" id="user" name="user">

<script>
var frm = document.getElementById("user");
frm.addEventListener("search", msearch);

function msearch() {
  alert("검색할 단어를 입력했습니다.");
}
</script>

onselect

폼 요소의 내용을 선택하면 경고창이 뜹니다.

<input type="text" id="user" name="user" value="하보니 PHP">

<script>
var frm = document.getElementById("user");
frm.addEventListener("select", mselect);

function mselect() {
  var sel = getSelection();
  alert( sel + " 를 선택했습니다.");
}
</script>