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
+19-7
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ 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,21 @@ 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.
23
33
24
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.
25
35
@@ -50,7 +60,7 @@ These events occur on cutting/copying/pasting a value.
50
60
51
61
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.
52
62
53
-
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.
54
64
55
65
For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
56
66
@@ -64,11 +74,13 @@ For instance, the code below prevents all such events and shows what we are tryi
64
74
</script>
65
75
```
66
76
67
-
Technically, we can copy/paste everything. For instance, we can copy a file in the OS file manager, and paste it.
77
+
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.
78
+
79
+
There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) that can work with different data types including files, read/write to the clipboard.
68
80
69
-
There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) to work with different data types, read/write to the clipboard.
81
+
But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety.
70
82
71
-
But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety. Also it is forbidden to create "custom" clipboard events in all browsers except Firefox.
83
+
Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox.
0 commit comments