是否檢測到HTML文本框的拖放？

Question

我的網頁上有一個普通的搜索框。 它充滿文字： Search this website

當您在框中單擊以鍵入搜索查詢時，將刪除此文本：

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

但是，如何像我自己經常做的那樣，檢測何時有人將文本從頁面拖到搜索框上？ 不會觸發onfocus並且保留先前的文本。

Answer 1

您需要使用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;
        }
    }
})();

示例 -Firefox 3 +，IE5 +，Chrome和Safari。 據我所知，Opera不支持該事件。 至少您可以使它對95％的訪問者有效。

拖動操作-MDC

Answer 2

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

順便說一句，有一個漂亮的小jQuery插件jquery-defaultvalue ，它可以為您處理所有極端情況。 如果您仍在使用jQuery，則值得一看。

Answer 3

參見-http: //www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html ，但是頁面上的俄語（Google翻譯會有所幫助）。