Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Events: change, input, cut, copy, paste #224

Merged
merged 1 commit into from
Oct 9, 2021
Merged

Events: change, input, cut, copy, paste #224

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions 2-ui/4-forms-controls/3-events-change-input/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
# Events: change, input, cut, copy, paste

Let's cover various events that accompany data updates.
Mari kita bahas berbagai *event* yang menyertai pembaruan data.

## Event: change

The `change` event triggers when the element has finished changing.
*Event* `change` terpicu saat elemen selesai diubah.

For text inputs that means that the event occurs when it loses focus.
Untuk input teks, itu berarti bahwa *event* terjadi ketika kehilangan fokus.

For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
Misalnya, saat kita mengetik di *field* teks di bawah -- tidak ada *event*. Tetapi ketika kita memindahkan fokus ke tempat lain, misalnya, klik tombol -- akan ada *event* `change`:

```html autorun height=40 run
<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">
```

For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes:
Untuk elemen lain: `select`, `input type=checkbox/radio` yang dipicu tepat setelah pilihan berubah:

```html autorun height=40 run
<select onchange="alert(this.value)">
Expand All @@ -29,11 +29,11 @@ For other elements: `select`, `input type=checkbox/radio` it triggers right afte

## Event: input

The `input` event triggers every time after a value is modified by the user.
*Event* `input` terpicu setiap kali nilai telah diubah oleh pengguna.

Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
Tidak seperti *event* keyboard, *event* `input` memicu perubahan *value* apa pun, bahkan yang tidak melibatkan tindakan keyboard: menempelkan dengan mouse atau menggunakan pengenalan suara untuk mendikte teks.

For instance:
Contohnya:

```html autorun height=40 run
<input type="text" id="input"> oninput: <span id="result"></span>
Expand All @@ -44,25 +44,25 @@ For instance:
</script>
```

If we want to handle every modification of an `<input>` then this event is the best choice.
Jika kita ingin menangani setiap modifikasi `<input>` maka *event* ini adalah pilihan terbaik.

On the other hand, `input` event doesn't trigger on keyboard input and other actions that do not involve value change, e.g. pressing arrow keys `key:⇦` `key:⇨` while in the input.
Di sisi lain, *event* `input` tidak dipicu pada input keyboard dan tindakan lain yang tidak melibatkan perubahan nilai, misalnya menekan tombol panah `key:⇦` `key:⇨` saat memasukkan.

```smart header="Can't prevent anything in `oninput`"
The `input` event occurs after the value is modified.
```smart header="Tidak dapat mencegah apa pun di `oninput`"
*Event* `input` terjadi setelah nilai diubah.

So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect.
Jadi kita tidak bisa menggunakan `event.preventDefault()` disana -- terlalu terlambat, tidak akan ada efeknya.
```

## Events: cut, copy, paste

These events occur on cutting/copying/pasting a value.
*Event* ini terjadi saat memotong/menyalin/menempelkan nilai.

They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
Mereka termasuk dalam kelas [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) dan menyediakan akses ke data yang disalin/ditempel.

We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted.
Kita juga bisa menggunakan `event.preventDefault()` untuk membatalkan aksi, maka tidak akan ada yang disalin/ditempel.

For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
Contohnya, kode di bawah ini mencegah semua *event* tersebut dan menunjukkan apa yang kita coba potong/salin/tempel:

```html autorun height=40 run
<input type="text" id="input">
Expand All @@ -74,22 +74,22 @@ For instance, the code below prevents all such events and shows what we are tryi
</script>
```

Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
Harap dicatat, bahwa memungkinkan untuk salin/tempel tidak hanya teks, tetapi semuanya. Misalnya, kita dapat menyalin file di manajer file OS, dan menempelkannya.

That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyound our scope now, but you can find its methods [in the specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
Itu karena `clipboardData` mengimplementasikan *interface* `DataTransfer`, yang biasa digunakan untuk drag'n'drop dan salin/tempel. Ini sedikit di luar jangkauan kita sekarang, tetapi Anda dapat menemukan metodenya [dalam spesifikasi ini](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).

```warn header="ClipboardAPI: user safety restrictions"
The clipboard is a "global" OS-level thing. So most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers.
```warn header="ClipboardAPI: batasan keamanan pengguna"
*Clipboard* adalah hal "global" tingkat OS. Jadi sebagian besar peramban mengizinkan akses baca/tulis ke *clipboard* hanya dalam lingkup tindakan pengguna tertentu untuk keamanan, misalnya di *event handler* `onclick`.

Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox.
Juga dilarang untuk membuat *event* *clipboard* "custom" dengan `dispatchEvent` di semua peramban kecuali Firefox.
```

## Summary
## Ringkasan

Data change events:
*Event* perubahan data:

| Event | Description | Specials |
| *Event* | Deskripsi | Specials |
|---------|----------|-------------|
| `change`| A value was changed. | For text inputs triggers on focus loss. |
| `input` | For text inputs on every change. | Triggers immediately unlike `change`. |
| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. |
| `change`| Sebuah *value* diubah. | Untuk pemicu input teks pada saat kehilangan fokus. |
| `input` | Untuk input teks pada setiap perubahan. | Pemicu langsung tidak seperti `change`. |
| `cut/copy/paste` | Tindakan potong/salin/tempel. | Tindakan tersebut dapat dicegah. Properti `event.clipboardData` memberikan akses baca/tulis ke *clipboard*. |