You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An element receives the focus when the user either clicks on it or uses the `key:Tab`key on the keyboard. There's also an`autofocus` HTML attribute that puts the focus onto an element by default when a page loads and other means of getting the focus.
3
+
사용자가 폼 요소를 클릭하거나 `key:Tab`키를 눌러 요소로 이동하면 해당 요소가 포커스(focus)됩니다.`autofocus`라는 HTML 속성을 사용해도 요소를 포커스 할 수 있는데 이 속성이 있는 요소는 페이지가 로드된 후 자동으로 포커싱 됩니다. 이 외에도 요소를 포커싱(focusing)할 수 있는 방법은 다양합니다.
4
4
5
-
Focusing on an element generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize the required functionality.
5
+
요소를 포커싱한다는 것은 일반적으로 '여기에 데이터를 입력할 준비를 하라'는 것을 의미하기 때문에 요소 포커싱이 이뤄지는 순간엔 요구사항을 충족시키는 초기화 코드를 실행할 수 있습니다.
6
6
7
-
The moment of losing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab`to go to the next form field, or there are other means as well.
7
+
요소가 포커스를 잃는 순간(blur)은 요소가 포커스를 얻는 순간보다 더 중요할 수 있습니다. 사용자가 다른 곳을 클릭하거나 `key:Tab`키를 눌러 다음 폼 필드로 이동하면 포커스 상태의 요소가 포커스를 잃게 됩니다. 이 외에도 다양한 방법을 사용해 포커스를 잃게 할 수 있습니다.
8
8
9
-
Losing the focus generally means: "the data has been entered", so we can run the code to check it or even to save it to the server and so on.
9
+
요소가 포커스를 잃는 것은 대개 '데이터 입력이 완료되었다'는 것을 의미하기 때문에 포커싱이 해제되는 순간엔 데이터를 체크하거나 입력된 데이터를 저장하기 위해 서버에 요청을 보내는 등의 코드를 실행할 수 있습니다.
10
10
11
-
There are important peculiarities when working with focus events. We'll do the best to cover them further on.
11
+
포커스 이벤트를 다룰 땐 이상해 보이지만 중요한 기능이 있는데, 이번 챕터에선 이에 대해서 자세히 다뤄보도록 하겠습니다.
12
12
13
-
## Events focus/blur
13
+
## focus, blur 이벤트
14
14
15
-
The `focus`event is called on focusing, and `blur`-- when the element loses the focus.
15
+
`focus`이벤트는 요소가 포커스를 받을 때, `blur`이벤트는 포커스를 잃을 때 발생합니다.
16
16
17
-
Let's use them for validation of an input field.
17
+
두 이벤트를 입력 필드 값 검증에 사용해 봅시다.
18
18
19
-
In the example below:
19
+
예시에서 각 핸들러는 다음과 같은 역할을 합니다.
20
20
21
-
-The `blur`handler checks if the field has an email entered, and if not -- shows an error.
22
-
-The `focus`handler hides the error message (on `blur`it will be checked again):
21
+
-`blur`핸들러에선 필드에 이메일이 잘 입력되었는지 확인하고 잘 입력되지 않은 경우엔 에러를 보여줍니다.
22
+
-`focus`핸들러에선 에러 메시지를 숨깁니다(이메일 재확인은 `blur`핸들러에서 합니다).
23
23
24
24
```html run autorun height=60
25
25
<style>
26
26
.invalid { border-color: red; }
27
27
#error { color: red }
28
28
</style>
29
29
30
-
Your email please: <inputtype="email"id="input">
30
+
이메일: <inputtype="email"id="input">
31
31
32
32
<divid="error"></div>
33
33
34
34
<script>
35
35
*!*input.onblur*/!*=function() {
36
-
if (!input.value.includes('@')) { //not email
36
+
if (!input.value.includes('@')) { //@ 유무를 이용해 유효한 이메일 주소가 아닌지 체크
37
37
input.classList.add('invalid');
38
-
error.innerHTML='Please enter a correct email.'
38
+
error.innerHTML='올바른 이메일 주소를 입력하세요.'
39
39
}
40
40
};
41
41
42
42
*!*input.onfocus*/!*=function() {
43
43
if (this.classList.contains('invalid')) {
44
-
//remove the "error" indication, because the user wants to re-enter something
44
+
//사용자가 새로운 값을 입력하려고 하므로 에러 메시지를 지움
45
45
this.classList.remove('invalid');
46
46
error.innerHTML="";
47
47
}
48
48
};
49
49
</script>
50
50
```
51
51
52
-
Modern HTML allows us to do many validations using input attributes: `required`, `pattern`and so on. And sometimes they are just what we need. JavaScript can be used when we want more flexibility. Also we could automatically send the changed value to the server if it's correct.
52
+
모던 HTML을 사용하면 `required`, `pattern`등의 다양한 속성을 사용해 입력값을 검증 할 수 있습니다. HTML 속성만으로도 검증이 가능한거죠. 그럼에도 불구하고 자바스크립트를 사용하는 이유는 자바스크립트가 좀 더 유연하기 때문입니다. 여기에 더하여 자바스크립트를 사용하면 제대로 된 값이 입력되었을 때 자동으로 해당값을 서버에 보낼 수 있기 때문이기도 합니다.
53
53
54
54
55
-
## Methods focus/blur
55
+
## focus, blur 메서드
56
56
57
-
Methods `elem.focus()` and `elem.blur()`set/unset the focus on the element.
57
+
`elem.focus()`와 `elem.blur()`메서드를 사용하면 요소에 포커스를 줄 수도 있고 제거할 수도 있습니다.
58
58
59
-
For instance, let's make the visitor unable to leave the input if the value is invalid:
59
+
사이트 방문자가 유효하지 않은 값을 입력하면 사이트를 떠나지 못하도록 하는 예시를 살펴봅시다.
60
60
61
61
```html run autorun height=80
62
62
<style>
@@ -65,16 +65,16 @@ For instance, let's make the visitor unable to leave the input if the value is i
65
65
}
66
66
</style>
67
67
68
-
Your email please: <inputtype="email"id="input">
69
-
<inputtype="text"style="width:220px"placeholder="make email invalid and try to focus here">
68
+
이메일: <inputtype="email"id="input">
69
+
<inputtype="text"style="width:220px"placeholder="이메일 형식이 아닌 값을 입력하고 여기에 포커스를 주세요.">
70
70
71
71
<script>
72
72
input.onblur=function() {
73
-
if (!this.value.includes('@')) { //not email
74
-
//show the error
73
+
if (!this.value.includes('@')) { //이메일이 아님
74
+
//에러 출력
75
75
this.classList.add("error");
76
76
*!*
77
-
//...and put the focus back
77
+
//input 필드가 포커스 되도록 함
78
78
input.focus();
79
79
*/!*
80
80
} else {
@@ -84,11 +84,11 @@ Your email please: <input type="email" id="input">
84
84
</script>
85
85
```
86
86
87
-
It works in all browsers except Firefox([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
87
+
이 예시는 Firefox([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579))를 제외한 모든 브라우저에서 정상 동작합니다.
88
88
89
-
If we enter something into the input and then try to use `key:Tab`or click away from the `<input>`, then `onblur`returns the focus back.
89
+
이메일이 아닌 값을 입력하고 `key:Tab`키나 다른 곳을 클릭해 `<input>`을 벗어나려 하면 `onblur`메서드가 동작해 포커스를 다시 입력 필드로 돌려놓습니다.
90
90
91
-
Please note that we can't "prevent losing focus" by calling `event.preventDefault()` in`onblur`, because `onblur` works *after* the element lost the focus.
91
+
여기서 주의해야 할 점은 `onblur`는 요소가 포커스를 잃고 난 *후*에 발생하기 때문에`onblur` 안에서 `event.preventDefault()`를 호출해 포커스를 잃게 하는걸 '막을 수 없다'라는 사실입니다.
92
92
93
93
```warn header="JavaScript-initiated focus loss"
94
94
A focus loss can occur for many reasons.
@@ -102,41 +102,41 @@ These features sometimes cause `focus/blur` handlers to misbehave -- to trigger
102
102
103
103
The best recipe is to be careful when using these events. If we want to track user-initiated focus-loss, then we should avoid causing it ourselves.
104
104
```
105
-
## Allow focusing on any element: tabindex
105
+
## tabindex를 사용해서 모든 요소 포커스 하기
106
106
107
-
By default many elements do not support focusing.
107
+
대다수의 요소는 기본적으로 포커싱을 지원하지 않습니다.
108
108
109
-
The list varies a bit between browsers, but one thing is always correct: `focus/blur` support is guaranteed for elements that a visitor can interact with: `<button>`, `<input>`, `<select>`, `<a>` and so on.
109
+
포커싱을 지원하지 않는 요소 목록은 브라우저마다 다르긴 하지만 한 가지 확실한 것은 `<button>`, `<input>`, `<select>`, `<a>`와 같이 사용자가 웹 페이지와 상호작용 할 수 있게 도와주는 요소는 `focus`, `blur`를 지원한다는 사실입니다.
110
110
111
-
On the other hand, elements that exist to format something, such as `<div>`, `<span>`, `<table>` -- are unfocusable by default. The method `elem.focus()`doesn't work on them, and `focus/blur` events are never triggered.
111
+
반면 `<div>`, `<span>`, `<table>`같이 무언가를 표시하는 용도로 사용하는 요소들은 포커싱을 지원하지 않습니다. 따라서 이런 요소엔 `elem.focus()`메서드가 동작하지 않고 `focus`, `blur`이벤트도 트리거 되지 않습니다.
112
112
113
-
This can be changed using HTML-attribute `tabindex`.
113
+
그럼에도 불구하고 포커스를 하고 싶다면 `tabindex` HTML 속성을 사용하면 됩니다.
114
114
115
-
Any element becomes focusable if it has `tabindex`. The value of the attribute is the order number of the element when `key:Tab`(or something like that) is used to switch between them.
115
+
`tabindex` 속성이 있는 요소는 종류와 상관없이 포커스가 가능합니다. 속성값은 숫자인데, 이 숫자는 `key:Tab`키를 눌러 요소 사이를 이동할 때 순서가 됩니다.
116
116
117
-
That is: if we have two elements, the first has `tabindex="1"`, and the second has `tabindex="2"`, then pressing `key:Tab` while in the first element -- moves the focus into the second one.
117
+
요소가 두 개 있다고 가정하고 첫 번째 요소의 `tabindex`엔 `1`을, 두 번째 요소의 `tabindex`엔 `2`를 할당하면 첫 번째 요소가 포커싱되어있는 상태에서 `key:Tab`을 눌렀을 때 두 번째 요소로 포커스가 이동합니다.
118
118
119
-
The switch order is: elements with`tabindex` from `1` and above go first (in the `tabindex` order), and then elements without `tabindex` (e.g. a regular `<input>`).
119
+
포커싱 되는 요소 순서는 다음과 같습니다.`tabindex`가 `1`인 요소부터 시작해 점점 큰 숫자가 매겨진 요소로 이동하고 그다음 `tabindex`가 없는 요소(평범한 `<input>` 요소 등)로 이동합니다.
120
120
121
-
Elements with matching `tabindex` are switched in the document source order (the default order).
121
+
`tabindex`가 없는 요소들은 문서 내 순서에 따라 포커스가 이동합니다(기본 순서).
122
122
123
-
There are two special values:
123
+
그런데 `tabindex`를 사용할 땐 주의해야 할 사항이 있습니다.
124
124
125
-
-`tabindex="0"` puts an element among those without `tabindex`. That is, when we switch elements, elements with `tabindex=0` go after elements with `tabindex ≥ 1`.
125
+
-`tabindex`가 `0`인 요소 -- 이 요소는 `tabindex` 속성이 없는것처럼 동작합니다. 따라서 포커스를 이동시킬 때 `tabindex`가 `0`인 요소는 `tabindex`가 1보다 크거나 같은 요소보다 나중에 포커스를 받습니다.
126
126
127
-
Usually it's used to make an element focusable, but keep the default switching order. To make an element a part of the form on par with `<input>`.
127
+
`tabindex="0"`은 요소를 포커스 가능하게 만들지만 포커스 순서는 기본 순서 그대로 유지하고 싶을 때 사용합니다. 요소의 포커스 우선 순위를 일반 `<input>`과 같아지도록 하죠.
128
128
129
-
-`tabindex="-1"` allows only programmatic focusing on an element. The `key:Tab` key ignores such elements, but method `elem.focus()`works.
129
+
-`tabindex`가 `-1`인 요소 -- 스크립트로만 포커스 하고 싶은 요소에 사용합니다. `key:Tab`키를 사용하면 이 요소는 무시되지만 `elem.focus()`메서드를 사용하면 잘 포커싱 됩니다.
130
130
131
-
For instance, here's a list. Click the first item and press `key:Tab`:
131
+
예시를 살펴봅시다. 첫 번째 항목을 클릭하고 `key:Tab` 키를 눌러보세요.
132
132
133
133
```html autorun no-beautify
134
-
Click the first item and press Tab. Keep track of the order. Please note that many subsequent Tabs can move the focus out of the iframe in the example.
134
+
첫 번째 항목을 클릭하고 `key:Tab` 키를 눌러보면서 포커스 된 요소 순서를 눈여겨보세요. 참고로 탭을 많이 누르면 예시 밖으로 포커스가 이동하니, 주의하세요.
135
135
<ul>
136
-
<litabindex="1">One</li>
137
-
<litabindex="0">Zero</li>
138
-
<litabindex="2">Two</li>
139
-
<litabindex="-1">Minus one</li>
136
+
<litabindex="1">일</li>
137
+
<litabindex="0">영</li>
138
+
<litabindex="2">이</li>
139
+
<litabindex="-1">음수 일</li>
140
140
</ul>
141
141
142
142
<style>
@@ -145,63 +145,62 @@ Click the first item and press Tab. Keep track of the order. Please note that ma
145
145
</style>
146
146
```
147
147
148
-
The order is like this: `1 - 2 - 0`. Normally, `<li>` does not support focusing, but `tabindex` full enables it, along with events and styling with `:focus`.
148
+
보시다시피 포커스는 `tabindex`가 `1`, `2`, `0`인 요소로 차례로 이동합니다. `<li>`는 기본적으로 포커스 할 수 없는 요소이지만 예시에서 `tabindex`를 사용해서 실제 포커스를 해보았고 포커스 된 요소는 `:focus`를 사용해서 스타일을 바꿔보았습니다.
The example above doesn't work, because when user focuses on an `<input>`, the `focus`event triggers on that input only. It doesn't bubble up. So`form.onfocus` never triggers.
170
+
의도한 대로 예시가 동작하지 않는 이유는 사용자가 `<input>`을 포커스 해도 `focus`이벤트는 해당 입력 필드에서만 트리거 되기 때문입니다. `focus` 이벤트는 버블링 되지 않습니다. 따라서`form.onfocus`는 절대 트리거 되지 않습니다.
171
171
172
-
There are two solutions.
172
+
이런 기본동작을 피해 이벤트 위임 효과를 주는 방법은 두 가지가 있습니다.
173
173
174
-
First, there's a funny historical feature: `focus/blur` do not bubble up, but propagate down on the capturing phase.
174
+
첫 번째 방법은 `focus`와 `blur`는 버블링 되지 않지만 캡처링은 된다는 점을 이용하면 됩니다.
0 commit comments