InputEvent: свойство dataTransfer

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

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

Чтение-только свойство dataTransfer интерфейса InputEvent возвращает объект DataTransfer, содержащий информацию о форматированном или простом тексте, добавляемом или удаляемом из редактируемого содержимого.

Значение

Объект DataTransfer или null. В спецификации есть общий обзор его значения в различных случаях.

Примеры

В следующем простом примере мы настроили обработчик событий для события input, так что при вставке содержимого в элемент <p> с атрибутом contenteditable, его HTML-код извлекается с помощью метода InputEvent.dataTransfer.getData() и отображается в абзаце под элементом ввода.

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

<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p>
  <span style="font-style: italic; color: red">Exciting: italic red text!</span>
</p>
<p>Boring normal text ;-(</p>

<hr />

<p contenteditable="true">
  Go on, try pasting some content into this editable paragraph and see what
  happens!
</p>

<p class="result"></p>

const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = e.dataTransfer.getData("text/html");
});

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

Спецификация
Уровни событий ввода 2 # dom-inputevent-datatransfer

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`dataTransfer`	60	79	67	47	10.1	60	67	44	10.3	8.0	60

© 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/InputEvent/dataTransfer