javascript - 检测拖放到 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;
        }
    }
})();

Example - Firefox 3+、IE5+、Chrome 和 Safari。据我所知，Opera 不支持该事件。不过，至少您可以让它对 95% 的访问者有效。

Drag Operations - MDC