SVGGraphicsElement: событие paste

Базовая линия Широко доступно

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

Событие paste срабатывает на элементе SVGGraphicsElement, когда пользователь инициировал действие "вставка" через пользовательский интерфейс браузера.

Если курсор находится в контексте редактирования (например, в <textarea> или элементе с атрибутом contenteditable, установленным в значение true), то по умолчанию содержимое буфера обмена вставляется в документ в позиции курсора.

Обработчик этого события может получить доступ к содержимому буфера обмена, вызвав getData() для свойства clipboardData события.

Чтобы переопределить стандартное поведение (например, для вставки других данных или преобразования содержимого буфера обмена) обработчик события должен отменить стандартное действие, используя event.preventDefault(), а затем вручную вставить необходимые данные.

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

Синтаксис

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

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

onpaste = (event) => {};

Тип события

Объект ClipboardEvent. Наследуется от Event.

Пример

HTML

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

CSS

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

JavaScript

document
  .getElementById("element-to-paste-text")
  .addEventListener("paste", (evt) => {
    evt.target.textContent = evt.clipboardData
      .getData("text/plain")
      .toUpperCase();
    evt.preventDefault();
  });

Результат

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

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

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

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

См. также

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

© 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/paste_event