DOM

：

：

InputEvent.dataTransfer プロパティ

　編集：2022.10.04 by T.A.

[Edge]。読取専用。→、

InputEvent で編集可能なコンテンツに追加または削除されるリッチテキストまたはプレーンテキスト データに関する情報を含む DataTransfer オブジェクトを返します。

構文
InputEvent.dataTransfer
値

DataTransfer オブジェクト。

例
mdnより

次の簡単な例では、入力イベントにイベント リスナーを設定して、コンテンツが contenteditable

要素に貼り付けられたときに、その HTML ソースは InputEvent.dataTransfer.getData() メソッドを介して取得され、入力の下の段落に報告されます。

提供されているコンテンツの一部をコピーして貼り付けて、効果を確認してください。

HTML： 

<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>

JavaScript： 

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

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

HTML： 

<INPUT id=IdTest><BR>
<SPAN id=IdTest2 contenteditable>[SPAN要素。編集可能]</SPAN><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //inputイベントの処理：
  D=eve; //＝[object]：[object InputEvent]。INPUT要素でATOKを介して「あい」とキー入力してみた。

詳細	//isTrusted＝[boolean]：true
	//data＝[string]：あい
	//isComposing＝[boolean]：false
	//inputType＝[string]：insertText
	//dataTransfer＝[object]：null
	//getTargetRanges＝[function]：function getTargetRanges() { [native code] }
	//view＝[object]：null
	//detail＝[number]：0
	//sourceCapabilities＝[object]：null
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：input
	//target＝[object]：[object HTMLInputElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…


  IdLog.innerHTML=eve.data; //表示。
  DA=eve.dataTransfer.getData('text/html'); //＝[undefined]：undefined。eve.dataTransfer が null だから得られない。
}
IdTest.oninput=Job;  //イベント割り当て。
IdTest2.oninput=Job; //イベント割り当て。

ドラッグ＆ドロップとかしてみたが DataTransfer が得られない。

テスト