예제 9-16. onfocus와 onblur, 이름을 입력하지 않고 다른 창으로 갈 수 없음.
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 15:25 |6. 폼과 이벤트 활용
* onblur와 onfocus
포커스는 키 입력에 대한 독점권.
HTML 요소가 포커스를 받게 될 때 onfocus 리스너가 호출.
포커스를 잃는 요소에는 onblur 리스너가 호출.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onfocus와 onblur</title> <script> function checkFilled(obj) { if(obj.value == "") { alert("enter name!"); obj.focus(); // obj에 다시 포커스 } } </script> </head> <body onload= // 초기화면 포커스 "document.getElementById('name').focus();"> <h3>onfocus와 onblur</h3> <hr> <p>이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.</p> <form> 이름 <input type="text" id="name" onblur="checkFilled(this)"><p> 학번 <input type="text"> </form> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-19. select 객체에서 선택한 과일 출력 (0) | 2017.11.02 |
|---|---|
| 예제 9-17. 선택된 라디오버튼 알아내기. 예제 9-18. 체크박스로 선택한 물품 계산 (0) | 2017.11.02 |
| 예제 9-15. 이미지 갤러리 만들기 : new Image()로 이미지 로딩 (0) | 2017.11.02 |
| 예제 9-14. onload로 이미지 크기 알아내기 (0) | 2017.11.02 |
| 예제 9-13. onload에서 사이트 이전을 알리는 공고창 출력 (0) | 2017.11.02 |