テキストボックスにドロップされたウェブサイトHTML

Question

テキストボックスを含むユーザースクリプト（DOM JavaScript）を作成しました。私は、テキストボックスがアイテムのドロップ時に入力のGoogle検索を開くようにしたい。たとえば、「Javascript」という単語を選択してテキストボックスにドラッグすると、「Javascript」のGoogle検索が開きます。

これは私が持っているコードです：

//only Javascript 
var input2=document.createElement("input"); 
input2.type="text"; 
input2.id="Word_search"; 
input2.addEventListener("drop", GoogleWord); 
document.body.appendChild(input2); 

function GoogleWord(){ 
    console.log("hi"); 
    var text = document.getElementById("Word_search").value; 
    alert(text); 
    window.open('https://www.google.com/search?q=' + text,'_blank'); 
} 

（スニペット内で動作するようには思えないので、私はスニペットを使用することができなかった）

主な問題は、関数が前に実行されることですテキストがテキストボックスに挿入されるため、空のGoogle検索が行われます。

したがって、関数が実行されるときにテキストボックス内にテキストが必要です。

Answer 1

、これを試してみてください。ドロップされたテキストを取得する方法はevent.dataTransfer.getData(mimetype)です。

function GoogleWord(event){ 
    console.log("hi"); 
    var text = event.dataTransfer.getData('text/plain'); 
    alert(text); 
    window.open('https://www.google.com/search?q=' + text,'_blank'); 
} 

FIDDLE

Answer 2

は、入力がドロップされたテキストで更新される前に、dropイベントが明らかに発生し

function GoogleWord(e){ 
    console.log("hi"); 
    var text =  e.target.value; 
    alert(text); 
    window.open('https://www.google.com/search?q=' + text,'_blank'); 
}