1. 포커스

 

- 포커스는 현재 키 입력에 대한 독점권

- 브라우저는 포커스를 가지고 있는 HTML 태그 요소에 키 공급

 

2. onblur

 

- 포커스를 잃을 때 발생하는 이벤트 리스너

  예) 다른 HTML 요소를 클릭하면, 현재 HTML 요소는 포커스를 잃는다.

 

3. onfocus

- 포커스를 잃을 때 발생하는 이벤트 리스너

  예) 현재 HTML 요소를 클릭하면, 현재 HTML 요소가 포커스를 얻는다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function checkFilled(obj){
            if(obj.value=="" && obj.placeholder ==""){
                alert("enter name");
                obj.focus();
                obj.placeholder = " "
            }
        }
    </script>
</head>
<body onload="document.getElementById('name').focus()">
    <h3>onfocus와 onblur</h3><hr>
    <form>
        이름 : <input id="name" onblur="checkFilled(this)"><p>
        학번 : <input>
    </form>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

'화면구현' 카테고리의 다른 글

계산기 만들기  (0) 2020.03.12
라디오버튼과 체크박스  (0) 2020.03.12
마우스 핸들링, oncontextmenu, 이미지 로드, onload, new Image()  (0) 2020.03.12
이벤트  (0) 2020.03.12
문서의 동적 구성  (0) 2020.03.12
onblur와 onfocus :: 2020. 3. 12. 22:28 화면구현
openclose