From 0f1b5e29e7be7791e7d158a19f02998a344b3f94 Mon Sep 17 00:00:00 2001 From: front42 Date: Sun, 15 Feb 2026 21:20:25 +0300 Subject: [PATCH 1/2] feat: update events-change-input article.md ru --- .../3-events-change-input/article.md | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index ac8fde2e86..0634e4fb81 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -50,7 +50,7 @@ ```smart header="Нельзя ничего предотвратить в `oninput`" Событие `input` происходит после изменения значения. -Поэтому мы не можем использовать `event.preventDefault()` там - будет уже слишком поздно, никакого эффекта не будет. +Поэтому мы не можем использовать `event.preventDefault()` там -- уже слишком поздно, никакого эффекта не будет. ``` ## События: cut, copy, paste @@ -61,25 +61,46 @@ Мы также можем использовать `event.preventDefault()` для предотвращения действия по умолчанию, и в итоге ничего не скопируется/не вставится. -Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить: +Например, код, приведённый ниже, предотвращает все `cut/copy/paste` события и показывает текст, который мы пытаемся вырезать/копировать/вставить: ```html autorun height=40 run ``` -Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл из файловой системы и вставить его. +Обратите внимание: внутри обработчиков событий `cut` и `copy` вызов `event.clipboardData.getData(...)` возвращает пустую строку. Это потому, что технически данные ещё не находятся в буфере обмена. Если мы используем `event.preventDefault()` они вообще не будут скопированы. + +Поэтому в приведённом выше примере используется `document.getSelection()` для получения выделенного текста. Более подробную информацию о выделении в документе можно найти в главе . + +Возможно копирование/вставка не только текста, но и любых данных. Например, мы можем скопировать файл в файловом менеджере ОС и вставить его. + +Это потому, что `clipboardData` реализует интерфейс `DataTransfer`, обычно используемый для перетаскивания и копирования/вставки. Сейчас это немного выходит за рамки нашего рассмотрения, но вы можете найти его методы в [спецификации DataTransfer](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface). + +Кроме того, существует дополнительный асинхронный API для доступа к буферу обмена: `navigator.clipboard`. Подробнее -- в спецификации [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [не поддерживается в Firefox](https://caniuse.com/async-clipboard). + +## Ограничения безопасности + +Буфер обмена работает глобально, на уровне ОС. Пользователь может переключаться между приложениями, копировать/вставлять различные данные, и страница браузера не должна всё это видеть. + +Поэтому большинство браузеров разрешают беспрепятственный доступ к буферу обмена для чтения/записи только в рамках определённых действий пользователя, таких как копирование/вставка и т.д. + +Запрещено генерировать "пользовательские" события буфера обмена с помощью `dispatchEvent` во всех браузерах, кроме Firefox. И даже если нам удастся создать такое событие, спецификация чётко указывает, что такие "синтетические" события не должны предоставлять доступ к буферу обмена. -Существует список методов [в спецификации](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) для работы с различными типами данных, чтения/записи в буфер обмена. +Даже если кто-то решит сохранить `event.clipboardData` в обработчике событий, а затем обратиться к нему позже -- это не сработает. -Но обратите внимание, что буфер обмена работает глобально, на уровне ОС. Большинство браузеров в целях безопасности разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя, к примеру, в обработчиках событий `onclick`. +Повторим: [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) работает исключительно в контексте обработчиков событий, инициированных пользователем. -Также запрещается генерировать "пользовательские" события буфера обмена при помощи `dispatchEvent` во всех браузерах, кроме Firefox. +С другой стороны, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) -- более современный API, предназначенный для использования в любых сценариях. Он запрашивает разрешение пользователя, если это необходимо. ## Итого @@ -89,4 +110,4 @@ |---------|----------|-------------| | `change`| Значение было изменено. | Для текстовых полей срабатывает при потере фокуса. | | `input` | Срабатывает при каждом изменении значения. | Запускается немедленно, в отличие от `change`. | -| `cut/copy/paste` | Действия по вырезанию/копированию/вставке. | Действие можно предотвратить. Свойство `event.clipboardData` предоставляет доступ на чтение/запись в буфер обмена.. | +| `cut/copy/paste` | Действия по вырезанию/копированию/вставке. | Действие можно предотвратить. Свойство `event.clipboardData` предоставляет доступ на чтение/запись в буфер обмена. Все браузеры, кроме Firefox, также поддерживают `navigator.clipboard`. | From 06058af8e48970e6ba3ed3c02103087130b99a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C2=A1ke?= <77801554+front42@users.noreply.github.com> Date: Mon, 16 Feb 2026 14:52:59 +0300 Subject: [PATCH 2/2] fix: remove firefox mentions in events-change-input article.md ru --- 2-ui/4-forms-controls/3-events-change-input/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 0634e4fb81..21bf1e6362 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -86,7 +86,7 @@ Это потому, что `clipboardData` реализует интерфейс `DataTransfer`, обычно используемый для перетаскивания и копирования/вставки. Сейчас это немного выходит за рамки нашего рассмотрения, но вы можете найти его методы в [спецификации DataTransfer](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface). -Кроме того, существует дополнительный асинхронный API для доступа к буферу обмена: `navigator.clipboard`. Подробнее -- в спецификации [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [не поддерживается в Firefox](https://caniuse.com/async-clipboard). +Кроме того, существует дополнительный асинхронный API для доступа к буферу обмена: `navigator.clipboard`. Подробнее -- в спецификации [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/). ## Ограничения безопасности @@ -94,7 +94,7 @@ Поэтому большинство браузеров разрешают беспрепятственный доступ к буферу обмена для чтения/записи только в рамках определённых действий пользователя, таких как копирование/вставка и т.д. -Запрещено генерировать "пользовательские" события буфера обмена с помощью `dispatchEvent` во всех браузерах, кроме Firefox. И даже если нам удастся создать такое событие, спецификация чётко указывает, что такие "синтетические" события не должны предоставлять доступ к буферу обмена. +Запрещено генерировать "пользовательские" события буфера обмена с помощью `dispatchEvent`. И даже если нам удастся создать такое событие, спецификация чётко указывает, что такие "синтетические" события не должны предоставлять доступ к буферу обмена. Даже если кто-то решит сохранить `event.clipboardData` в обработчике событий, а затем обратиться к нему позже -- это не сработает. @@ -110,4 +110,4 @@ |---------|----------|-------------| | `change`| Значение было изменено. | Для текстовых полей срабатывает при потере фокуса. | | `input` | Срабатывает при каждом изменении значения. | Запускается немедленно, в отличие от `change`. | -| `cut/copy/paste` | Действия по вырезанию/копированию/вставке. | Действие можно предотвратить. Свойство `event.clipboardData` предоставляет доступ на чтение/запись в буфер обмена. Все браузеры, кроме Firefox, также поддерживают `navigator.clipboard`. | +| `cut/copy/paste` | Действия по вырезанию/копированию/вставке. | Действие можно предотвратить. Свойство `event.clipboardData` предоставляет доступ на чтение/запись в буфер обмена. Также существует асинхронный API — `navigator.clipboard`. |