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
+
Sebuah elemen menjadi fokus ketika user mengkliknya atau menggunakan tombol `key:Tab`pada keyboard. Ada juga atribut HTML `autofocus`yang fokus pada sebuah element secara default ketika memuat sebuah halaman dan sebagainya untuk mendapatkan fokus.
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
+
Fokus pada sebuah elemen pada umumnya diartikan: "bersiap untuk terima datanya disini", jadi itu adalah momen ketika kita bisa menjalankan kode untuk di inisiasi kebutuhan fungsionalitas.
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
+
Momen ketika hilang fokus ("blur") bahkan bisa lebih penting. Itu adalah dimana user klik disuatu tempat or menekan`key:Tab`untuk pindah ke kotak selanjutnya, atau dengan cara yang lain.
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
+
Kehilangan fokus pada umumnya diartikan: "data telah di isi", jadi kita bisa menjalankan kode untuk mengeceknya atau bahkan menyimpannya ke server dan sebagainya.
10
10
11
-
There are important peculiarities when working with focus events. We'll do the best to cover them further on.
11
+
Ada beberapa keanehan saat bekerja dengan event fokus. Kami akan melakukan yang terbaik untuk membahasnya lebih lanjut.
12
12
13
13
## Events focus/blur
14
14
15
-
The`focus`event is called on focusing, and `blur` -- when the element loses the focus.
15
+
Event`focus`terpanggil/trigger saat sedang fokus, dan event `blur` -- ketika elemen hilang fokus.
16
16
17
-
Let's use them for validation of an input field.
17
+
Mari gunakan mereka sebagai validasi sebuah kotak input.
18
18
19
-
In the example below:
19
+
Dalam contoh dibawah:
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`cek jika kotak email telah terisi , dan jika tidak -- tampilkan error.
22
+
-`focus`menyembunyikan pesan error (pada`blur`itu akan di cek kembali):
23
23
24
24
```html run autorun height=60
25
25
<style>
26
-
.invalid { border-color: red; }
27
-
#error { color: red }
26
+
.invalid {
27
+
border-color: red;
28
+
}
29
+
#error {
30
+
color: red;
31
+
}
28
32
</style>
29
33
30
-
Your email please: <inputtype="email"id="input">
34
+
Your email please: <inputtype="email"id="input" />
31
35
32
36
<divid="error"></div>
33
37
34
38
<script>
35
-
*!*input.onblur*/!*=function() {
36
-
if (!input.value.includes('@')) { // not email
37
-
input.classList.add('invalid');
38
-
error.innerHTML='Please enter a correct email.'
39
-
}
40
-
};
39
+
*!*input.onblur*/!*=function() {
40
+
if (!input.value.includes('@')) { // not email
41
+
input.classList.add('invalid');
42
+
error.innerHTML='Please enter a correct email.'
43
+
}
44
+
};
41
45
42
-
*!*input.onfocus*/!*=function() {
43
-
if (this.classList.contains('invalid')) {
44
-
// remove the "error" indication, because the user wants to re-enter something
45
-
this.classList.remove('invalid');
46
-
error.innerHTML="";
47
-
}
48
-
};
46
+
*!*input.onfocus*/!*=function() {
47
+
if (this.classList.contains('invalid')) {
48
+
// remove the "error" indication, because the user wants to re-enter something
49
+
this.classList.remove('invalid');
50
+
error.innerHTML="";
51
+
}
52
+
};
49
53
</script>
50
54
```
51
55
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.
56
+
Dengan HTML modern kita bisa melakukan beberapa validasi menggunakan atribut input: `required`, `pattern`dan lainnya. Dan terkadang hanya mereka yang kita butuhkan. Kita bisa menggunakan Javascricpt jika ingin fleksibelitas lebih. Juga kita bisa secara otomatis mengirim nilai yang diubah ke server jika nilainya benar.
53
57
58
+
## Metode focus/blur
54
59
55
-
## Methods focus/blur
60
+
Metode `elem.focus()` dan `elem.blur()` set/unset fokus pada elemen.
56
61
57
-
Methods `elem.focus()` and `elem.blur()` set/unset the focus on the element.
58
-
59
-
For instance, let's make the visitor unable to leave the input if the value is invalid:
62
+
Misalnya, mari buat pengunjung tidak bisa keluar dari input jika nilainya tidak valid:
60
63
61
64
```html run autorun height=80
62
65
<style>
@@ -65,73 +68,80 @@ For instance, let's make the visitor unable to leave the input if the value is i
65
68
}
66
69
</style>
67
70
68
-
Your email please: <inputtype="email"id="input">
69
-
<inputtype="text"style="width:220px"placeholder="make email invalid and try to focus here">
71
+
Your email please: <inputtype="email"id="input" />
72
+
<input
73
+
type="text"
74
+
style="width:220px"
75
+
placeholder="make email invalid and try to focus here"
76
+
/>
70
77
71
78
<script>
72
-
input.onblur=function() {
73
-
if (!this.value.includes('@')) { // not email
74
-
// show the error
75
-
this.classList.add("error");
76
-
*!*
77
-
// ...and put the focus back
78
-
input.focus();
79
-
*/!*
80
-
} else {
81
-
this.classList.remove("error");
82
-
}
83
-
};
79
+
input.onblur=function() {
80
+
if (!this.value.includes('@')) { // not email
81
+
// show the error
82
+
this.classList.add("error");
83
+
*!*
84
+
// ...and put the focus back
85
+
input.focus();
86
+
*/!*
87
+
} else {
88
+
this.classList.remove("error");
89
+
}
90
+
};
84
91
</script>
85
92
```
86
93
87
-
It works in all browsers except Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
94
+
Itu bekerja pada semua browser kecuali Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
88
95
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.
96
+
Jika kita sedang mengetik/memasukkan sesuatu ke input dan coba menggunakan`key:Tab`atau klik diluar elemen `<input>`, maka`onblur`membuat fokus kembali ke input.
90
97
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.
98
+
Perlu diingat bahwa kita tidak bisa "mencegah hilangnya fokus" dengan memanggil`event.preventDefault()`pada`onblur`, karena`onblur`bekerja saat element hilang fokus.
92
99
93
100
```warn header="JavaScript-initiated focus loss"
94
-
A focus loss can occur for many reasons.
101
+
Focus loss bisa terjadi untuk alasan tertentu.
95
102
96
-
One of them is when the visitor clicks somewhere else. But also JavaScript itself may cause it, for instance:
103
+
Salah satu diantaranya adalah ketika pengunjung klik di tempat lain. Tetapi mungkin Javascript sendiri yang menyebabkannya, Misalya:
97
104
98
-
- An `alert` moves focus to itself, so it causes the focus loss at the element (`blur` event), and when the `alert` is dismissed, the focus comes back (`focus` event).
99
-
- If an element is removed from DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn't return.
105
+
- Sebuah `alert` memindahkan fokus untuknya, jadi itu menyebabkan focus loss pada elemen (`blur` event), dan ketika `alert` sudah tidak ada, fokus ada kembali (`focus` event).
106
+
- Jika sebuah elemen dihapus dari DOM, itu juga menyebabkan focus loss. Jika di isi lagi nanti, maka fokus tidak akan kembali.
100
107
101
-
These features sometimes cause `focus/blur` handlers to misbehave -- to trigger when they are not needed.
108
+
Beberapa fitur ini membuat `focus/blur` handler menjadi misbehave -- trigger disaat mereka tidak diperlukan.
102
109
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.
110
+
Resep yang baik adalah berhati-hati mengunakan event ini. Jika kita ingin melacak focus-loss yang dimulai oleh user, maka kita harus menghidari yang dapat menyebabkan pada kita sendiri.
104
111
```
105
-
## Allow focusing on any element: tabindex
106
112
107
-
By default many elements do not support focusing.
113
+
## Memungkinkan fokus pada elemen apapun: tabindex
114
+
115
+
Secara default banyak elemen yang tidak support focusing.
108
116
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.
117
+
Daftarnya sedikit bervariasi dibeda browser, etapi satu hal yang pasti benar: `focus/blur`dukungannya terjamin untuk elemen-elemen yang pengunjung bisa berinteraksi dengan: `<button>`, `<input>`, `<select>`, `<a>`dan lainnya.
110
118
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.
119
+
Di lain sisi, elemen-elemen yang ada hanya untuk meformat sesuatu seperti`<div>`, `<span>`, `<table>` -- adalah _unfocusable_ secara default. Metode `elem.focus()`tidak bekerja pada mereka, dan`focus/blur`event tidak akan pernah ke trigger.
112
120
113
-
This can be changed using HTML-attribute `tabindex`.
121
+
Ini bisa diubah dengan menggunakan HTML-attribute `tabindex`.
114
122
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.
123
+
Elemen apapun menjadi _focusable_ jika ia memilki`tabindex`. Nilai atributnya adalah dari urutan nomor elemen ketika `key:Tab`digunakan untuk berpindah diantara mereka.
116
124
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.
125
+
Itu adalah: jika kita memilki 2 elemen, yang pertama memilki`tabindex="1"`, dan yang kedua memilki`tabindex="2"`, lalu menekan`key:Tab`pada saat masih di elemen pertama -- fokus berpindah ke elemen kedua.
118
126
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>`).
127
+
Urutuan pindahnya ialah: elemen dengan`tabindex`dari`1`dan diatasnya menjadi yang pertama (pada urutan`tabindex`), dan baru kemudian elemen tanpa `tabindex` (seperti `<input>` input biasa).
120
128
121
-
Elements with matching `tabindex`are switched in the document source order (the default order).
129
+
Element dengan `tabindex`yang sesuai berpindah pada urutan sumber dokumen (urutan default).
122
130
123
-
There are two special values:
131
+
Disana ada dua nilai khusus:
124
132
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`.
133
+
-`tabindex="0"`menempatkan sebuah elemen diantara mereka tanpa`tabindex`. Itu ialah, ketika kita pindah elemen, elemen dengan`tabindex=0`berpindah setelah elemen dengan`tabindex ≥ 1`.
126
134
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>`.
135
+
Biasanya itu digunakan agar sebuah elemen menjadi _focusable_, tapi tetap memerhatikan urutan perpindahan default. Untuk membuat sebuah elemen menjadi bagian dari form yang setara`<input>`.
128
136
129
-
-`tabindex="-1"`allows only programmatic focusing on an element. The`key:Tab`key ignores such elements, but method `elem.focus()`works.
137
+
-`tabindex="-1"`hanya membolehkan _programmatic focusing_ pada sebuah elemen. Kunci`key:Tab`mengabaikan elemen seperti itu, akan tetapi metode `elem.focus()`dapat berfungsi.
130
138
131
-
For instance, here's a list. Click the first item and press`key:Tab`:
139
+
Misalnya, ada list elemen. Klik item pertama dan tekan`key:Tab`:
132
140
133
141
```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.
142
+
Klik pada elemen pertama dan tekan tab. Perhatikan pada urutan. Harap perhatikan
143
+
bahwa banyak Tab berikutnya yang dapat memindahkan fokus dari iframe dalam
144
+
contoh.
135
145
<ul>
136
146
<litabindex="1">One</li>
137
147
<litabindex="0">Zero</li>
@@ -140,22 +150,25 @@ Click the first item and press Tab. Keep track of the order. Please note that ma
140
150
</ul>
141
151
142
152
<style>
143
-
li { cursor: pointer; }
144
-
:focus { outline: 1pxdashedgreen; }
153
+
li {
154
+
cursor: pointer;
155
+
}
156
+
:focus {
157
+
outline: 1pxdashedgreen;
158
+
}
145
159
</style>
146
160
```
147
161
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`.
162
+
Urutannya sepeti ini: `1 - 2 - 0`. Normalnya, `<li>`tidak support _focusing_, tetapi dengan `tabindex`membuatnya _focusable_, berserta dengan eventnya dan styling `:focus`.
149
163
150
-
```smart header="The property `elem.tabIndex` works too"
151
-
We can add `tabindex` from JavaScript by using the `elem.tabIndex` property. That has the same effect.
152
-
```
164
+
```smart header="The property `elem.tabIndex`juga dapat bekerja" Kita bisa menambahkan`tabindex`dari JavaScript dengan menggunakan properti`elem.tabIndex`. Itu menghasilkan efek yang sama.
153
165
154
-
## Delegation: focusin/focusout
166
+
````
155
167
156
-
Events `focus` and `blur` do not bubble.
168
+
## Delegation: focusin/focusout
157
169
158
-
For instance, we can't put `onfocus` on the `<form>` to highlight it, like this:
170
+
Events `focus` and `blur` tidak mengelembung(bubble)./
171
+
Misalnya, kita tidak bisa letak `onfocus` pada `<form>` untuk menghighlight-nya, seperti ini:
159
172
160
173
```html autorun height=80
161
174
<!-- on focusing in the form -- add the class -->
@@ -165,61 +178,69 @@ For instance, we can't put `onfocus` on the `<form>` to highlight it, like this:
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.
183
+
Contoh diatas tidak akan bekerja, karena ketika sedang fokus pada sebuah`<input>`, event`focus`akan trigger hanya pada input tersebut. Ia tidak mengelembung ke atas(bubble up). Jadi`form.onfocus`tidak akan pernah trigger.
171
184
172
-
There are two solutions.
185
+
Hanya ada dua solusi.
173
186
174
-
First, there's a funny historical feature: `focus/blur`do not bubble up, but propagate down on the capturing phase.
187
+
Pertama, ada satu sejarah lucu dengan fitur: `focus/blur`yang tidak mengelembung ke atas(bubble up), tetapi merambat ke bawah saat _capturing phase_.
0 commit comments