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
Copy file name to clipboardExpand all lines: 2-ui/4-forms-controls/3-events-change-input/article.md
+20-8Lines changed: 20 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
# Events: change, input, cut, copy, paste
2
2
3
-
Let's discuss various events that accompany data updates.
3
+
Let's cover various events that accompany data updates.
4
4
5
5
## Event: change
6
6
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.
8
8
9
9
For text inputs that means that the event occurs when it loses focus.
10
10
@@ -15,11 +15,23 @@ For instance, while we are typing in the text field below -- there's no event. B
15
15
<inputtype="button"value="Button">
16
16
```
17
17
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
+
<selectonchange="alert(this.value)">
22
+
<optionvalue="">Select something</option>
23
+
<optionvalue="1">Option 1</option>
24
+
<optionvalue="2">Option 2</option>
25
+
<optionvalue="3">Option 3</option>
26
+
</select>
27
+
```
28
+
19
29
20
30
## Event: input
21
31
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.
23
35
24
36
For instance:
25
37
@@ -34,7 +46,7 @@ For instance:
34
46
35
47
If we want to handle every modification of an `<input>` then this event is the best choice.
36
48
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.
38
50
39
51
```smart header="Can't prevent anything in `oninput`"
40
52
The `input` event occurs after the value is modified.
@@ -48,7 +60,7 @@ These events occur on cutting/copying/pasting a value.
48
60
49
61
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.
50
62
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.
52
64
53
65
For instance, the code below prevents all `cut/copy/paste` events and shows the text we're trying to cut/copy/paste:
54
66
@@ -73,7 +85,7 @@ So the example above uses `document.getSelection()` to get the selected text. Yo
73
85
74
86
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.
75
87
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).
77
89
78
90
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).
79
91
@@ -89,7 +101,7 @@ Even if someone decides to save `event.clipboardData` in an event handler, and t
89
101
90
102
To reiterate, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) works solely in the context of user-initiated event handlers.
91
103
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.
0 commit comments