檢測拖放到HTML文本框？

我的網頁上有一個正常的搜索框。它充滿了文字：Search this website檢測拖放到HTML文本框？

當你點擊進入框中鍵入搜索查詢該文本被刪除：

onfocus="if(this.value=='Search this website') { this.value=''};

但我怎麼能發現，當有人拖動從頁面的文本複製到搜索框，因爲我經常做我自己？ onfocus未被觸發，並且前面的文本保持不變。

來源

2010-08-24 soupagain

您是否嘗試過使用onchange事件？

順便說一句，有一個漂亮的小jQuery插件叫jquery-defaultvalue，它處理所有的角落情況給你。如果你使用jQuery，那麼值得一看。

來源

2010-08-24 08:30:40

我檢查，* jQuery的默認值*實際上只處理的重點和模糊事件。它看起來不像處理任何角落案例:-) – 2010-08-24 10:38:15

請參閱 - http://www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html，但使用俄語（谷歌翻譯會有幫助）。

來源

2010-08-24 08:41:02 ajile

您需要使用ondrop事件，這隻會火如果ondragenter和ondragover事件被取消。結果表明它比這個更復雜一點，因爲Firefox的行爲與IE，Safari和Chrome不同。

(function() { 
    var inp = document.getElementById("test"), 
     chg = false; 

    inp.ondragover = inp.ondragenter = function() { 
     chg = inp.value == "Drop here"; 
     return false; 
    } 
    inp.ondrop = function (evt) { 
     evt = evt || event; 

     if (chg) { 
      this.value = evt.dataTransfer.getData("text") 
         || evt.dataTransfer.getData("text/plain"); 
      return false; 
     } 
    } 
})();

Example - Firefox 3 +，IE5 +，Chrome和Safari。據我所知，Opera不支持該事件。儘管至少你可以爲95％的訪問者工作。

Drag Operations - MDC

來源

2010-08-24 08:42:52

瀏覽器支持？ – 2010-08-24 08:47:52

@Tim：IE，Firefox，Chrome和Safari（完整的工作示例）。讓它在Firefox中工作有些痛苦，因爲它在觸發drop事件之前更改了輸入的值。解決方案是將值檢查移至* ondragover/ondragenter *事件。歌劇是奇怪的，這些事件在那裏是不受支持的，但是在支持它們的瀏覽器中使用它們沒有什麼壞處。 – 2010-08-24 09:26:52

很酷。我似乎記得上次看這個東西時有點棘手。 – 2010-08-24 09:59:35

檢測拖放到HTML文本框？

回答

相關問題