SVGGraphicsElement: событие копирования

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Событие copy срабатывает на SVGGraphicsElements, когда пользователь инициирует действие копирования через пользовательский интерфейс браузера.

По умолчанию событие копирует выделенный фрагмент (если таковой имеется) в буфер обмена.

Обработчик этого события может изменить содержимое буфера обмена, вызвав setData(format, data) для свойства ClipboardEvent.clipboardData события и отменив стандартное действие события с помощью event.preventDefault().

Однако, обработчик не может читать данные из буфера обмена.

Возможно создать и вызвать синтетическое синтетическое событие copy, но это не повлияет на системный буфер обмена.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("copy", (event) => {});

oncopy = (event) => {};

Тип события

Тип ClipboardEvent. Наследуется от Event.

Пример

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg
  viewBox="0 0 100 30"
  width="600"
  height="320"
  xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="10" id="text-to-copy">Copy this text</text>
  <foreignObject x="5" y="20" width="90" height="20">
    <input xmlns="http://www.w3.org/1999/xhtml" placeholder="Paste it here" />
  </foreignObject>
</svg>

CSS

input {
  font-size: 10px;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  border: 1px solid black;
}

JavaScript

document.querySelector("text").addEventListener("copy", (evt) => {
  evt.clipboardData.setData(
    "text/plain",
    document.getSelection().toString().toUpperCase(),
  );
  evt.preventDefault();
});

Результат

Спецификации

Спецификация
Clipboard API и события # clipboard-event-copy
HTML # handler-oncopy

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView Android
`copy_event`	1	12	22	≤12.1	3	18	22	≤12.1	3	1.0	4.4

См. также

Связанные события: cut, paste
Это событие для HTML Element целевых элементов: copy
Это событие для Document целевых элементов: copy
Это событие для Window целевых элементов: copy

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/copy_event