ドロップ時に値変更イベントを入力要素に入力

Question

クロスブラウザのJavaScriptでは、テキストがドラッグされてフィールドにドロップされたために<input>要素の値が変更された後にイベントを取得する方法はありますか？

input.addEventListener("change", cb); // Is not triggered on drop 
input.addEventListener("drop", cb); // Is triggered before the value change 

問題を実証するためのスニペット：

let input = document.getElementById('input'); 
 
let button = document.getElementById('button'); 
 
let div = document.getElementById('div'); 
 

 
function log(msg) { 
 
\t let el = document.createElement('pre'); 
 
\t el.textContent = msg; 
 
\t div.appendChild(el); 
 
} 
 

 
input.addEventListener("change", function() { 
 
\t log("CHANGE: " + input.value); 
 
}); 
 

 
input.addEventListener("keyup", function() { 
 
\t log("KEYUP: " + input.value); 
 
}); 
 

 
input.addEventListener("drop", function() { 
 
\t log("DROP: " + input.value); 
 
}); 
 

 
button.addEventListener("click", function() { 
 
\t log("CLICK: " + input.value); 
 
}); 
 

 
log("Try dragging text into the input field");

<input id="input"></input> 
 
<button id="button">Click</button> 
 
<div id="div"></div>

Answer 1

あなたがgetData方法でドロップされたデータのテキスト値を取得することができます。

// This will get the current data value dropped as a string 
event.dataTransfer.getData("text"); 

とこの同じ値が設定されないようにする

// This will prevent the input to be changed with the dropped data 
event.preventDefault(); 

だから、完全なイベント・ハンドラは次のようになります：：と入力して

input.addEventListener('drop', function (event) { 
    event.preventDefault(); 
    var textData = event.dataTransfer.getData('text'); 
    // do whatever you want with the the text data 
}); 

ので、代わりの適切なタイミングで入力値を取得しようと、あなたはからデータを傍受することができますイベントをドロップして、それを使ってください。後でそれをテキストとして設定することもできます。

問題が解決するかどうか教えてください。