Элемент: событие paste

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

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

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

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

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

Это событие передаётся вверх по иерархии, является отменяемым и составным.

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

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

onpaste = (event) => {};

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

HTML

<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

JavaScript

const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});

Результат

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