jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

closes #2738

Browse source
This commit is contained in:
Ilya Kantor 2021-10-10 18:21:14 +03:00
parent b09e38c557
commit f4801c3a17
1 changed files with 31 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -58,31 +58,50 @@ So we can't use `event.preventDefault()` there -- it's just too late, there woul
These events occur on cutting/copying/pasting a value. These events occur on cutting/copying/pasting a value.
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. 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.
We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted. We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted.
For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste: For instance, the code below prevents all `cut/copy/paste` events and shows the text we're trying to cut/copy/paste:
```html autorun height=40 run ```html autorun height=40 run
<input type="text" id="input"> <input type="text" id="input">
<script> <script>
input.oncut = input.oncopy = input.onpaste = function(event) { input.onpaste = function(event) {
alert(event.type + ' - ' + event.clipboardData.getData('text/plain')); alert("paste: " + event.clipboardData.getData('text/plain'));
return false; event.preventDefault();
};
input.oncut = input.oncopy = function(event) {
alert(event.type + '-' + document.getSelection());
event.preventDefault();
}; };
</script> </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. Please note: inside `cut` and `copy` event handlers a call to `event.clipboardData.getData(...)` returns an empty string. That's because technically the data isn't in the clipboard yet. If we use `event.preventDefault()` it won't be copied at all.
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 specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface). So the example above uses `document.getSelection()` to get the selected text. You can find more details about document selection in the article <info:selection-range>.
```warn header="ClipboardAPI: user safety restrictions" 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.
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.
Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. 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).
```
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).
### Safety restrictions
The clipboard is a "global" OS-level thing. A user may switch between various applications, copy/paste different things, and a browser page shouldn't see all that.
So most browsers allow seamless read/write access to the clipboard only in the scope of certain user actions, such as copying/pasting etc.
It's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such "syntetic" events must not provide access to the clipboard.
Even if someone decides to save `event.clipboardData` in an event handler, and then access it later -- it won't work.
To reiterate, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) works solely in the context of user-initiated event handlers.
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.
## Summary ## Summary
@ -92,4 +111,4 @@ Data change events:
|---------|----------|-------------| |---------|----------|-------------|
| `change`| A value was changed. | For text inputs triggers on focus loss. | | `change`| A value was changed. | For text inputs triggers on focus loss. |
| `input` | For text inputs on every change. | Triggers immediately unlike `change`. | | `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. | | `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives access to the clipboard. All browsers except Firefox also support `navigator.clipboard`. |