Skip to content

Commit 11f17cb

Browse files
authored
Merge pull request #358 from odsantos/update-en-events--change-input-cut
Update "Events: change, input, cut, copy, paste" article
2 parents cee6861 + 15495a0 commit 11f17cb

File tree

1 file changed

+20
-8
lines changed
  • 2-ui/4-forms-controls/3-events-change-input

1 file changed

+20
-8
lines changed

2-ui/4-forms-controls/3-events-change-input/article.md

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Events: change, input, cut, copy, paste
22

3-
Let's discuss various events that accompany data updates.
3+
Let's cover various events that accompany data updates.
44

55
## Event: change
66

7-
The [change](http://www.w3.org/TR/html5/forms.html#event-input-change) event triggers when the element has finished changing.
7+
The `change` event triggers when the element has finished changing.
88

99
For text inputs that means that the event occurs when it loses focus.
1010

@@ -15,11 +15,23 @@ For instance, while we are typing in the text field below -- there's no event. B
1515
<input type="button" value="Button">
1616
```
1717

18-
For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes.
18+
For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes:
19+
20+
```html autorun height=40 run
21+
<select onchange="alert(this.value)">
22+
<option value="">Select something</option>
23+
<option value="1">Option 1</option>
24+
<option value="2">Option 2</option>
25+
<option value="3">Option 3</option>
26+
</select>
27+
```
28+
1929

2030
## Event: input
2131

22-
The `input` event triggers every time a value is modified.
32+
The `input` event triggers every time after a value is modified by the user.
33+
34+
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.
2335

2436
For instance:
2537

@@ -34,7 +46,7 @@ For instance:
3446

3547
If we want to handle every modification of an `<input>` then this event is the best choice.
3648

37-
Unlike keyboard events it works on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
49+
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.
3850

3951
```smart header="Can't prevent anything in `oninput`"
4052
The `input` event occurs after the value is modified.
@@ -48,7 +60,7 @@ These events occur on cutting/copying/pasting a value.
4860
4961
They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is cut/copied/pasted.
5062
51-
We also can use `event.preventDefault()` to abort the action.
63+
We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted.
5264
5365
For instance, the code below prevents all `cut/copy/paste` events and shows the text we're trying to cut/copy/paste:
5466
@@ -73,7 +85,7 @@ So the example above uses `document.getSelection()` to get the selected text. Yo
7385

7486
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.
7587

76-
That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
88+
That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's a bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
7789

7890
Also, there's an additional asynchronous API of accessing the clipboard: `navigator.clipboard`. More about it in the specification [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [not supported by Firefox](https://caniuse.com/async-clipboard).
7991

@@ -89,7 +101,7 @@ Even if someone decides to save `event.clipboardData` in an event handler, and t
89101

90102
To reiterate, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) works solely in the context of user-initiated event handlers.
91103

92-
On the other hand, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) is the more recent API, meant for use in any context. It asks for user permission, if needed. Not supported in Firefox.
104+
On the other hand, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) is the more recent API, meant for use in any context. It asks for user permission, if needed.
93105

94106
## Summary
95107

0 commit comments

Comments
 (0)