-
[JavaScript] 폼과 이벤트 활용 : onfocus와 onblur개발 프로세스/Front-end 2021. 6. 17. 15:03
포커스 (focus)
키 입력에 대한 독점권. 여러 개의 텍스트 창이나 라디오버튼, 체크 박스 등이 있을 떄, 마우스로 선택하면 그 폼 요소로 포커스가 옮겨가며 포커스를 가지고 있던 것은 포커스를 잃게 된다.
onfocus, onblur
HTML 요소가 포커스를 받게 될 때 onfocus 리스너가 호출되고, 포커스를 잃는 요소에는 onblur 리스너가 호출된다.
function checkFilled(obj) { if(obj.value == "") { alert("enter name!"); obj.focus(); // obj에 다시 포커스 } }
<body onload="document.getElementById('name').focus();"> <!-- HTML 문서가 로드되면 처음부터 이름 입력 창에 포커스를 주기 위해 <body> 태그에 onload 리스너를 추가함. --> <h3>onfocus와 onblur</h3> <hr> <p>이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.</p> <form> 이름 <input type="text" id="name" onblur="checkFilled(this)"><p> 학번 <input type="text"> </form> </body>
<참고 교재>
명품 웹 프로그래밍
브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가
webprogramming.co.kr
'개발 프로세스 > Front-end' 카테고리의 다른 글
[JavaScript] 폼과 이벤트 활용 : select 객체와 onchange (0) 2021.06.17 [JavaScript] 폼과 이벤트 활용 : 라디오버튼과 체크박스 (0) 2021.06.17 [JavaScript] 문서와 이미지 로딩, onload (0) 2021.06.17 [JavaScript] 마우스 핸들링 (0) 2021.06.17 [JavaScript] 이벤트 리스너 만들기 (0) 2021.06.17