Question

我的网页上有一个普通的搜索框。它充满了文字：Search this website

当您单击框中以键入搜索查询时，将删除此文本：

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

但我怎么能检测到有人将文字从页面拖到搜索框上，就像我经常做的那样？ <{1}}未被触发，之前的文字仍然存在。

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

Answer 2

您是否尝试过使用onchange事件？

顺便说一下，有一个名为jQuery的小jquery-defaultvalue插件可以为你处理所有角落案例。无论如何你都在使用jQuery，值得一看。

Answer 3

请参阅 - http://www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html，但有关俄语的网页（谷歌翻译会有所帮助）。

检测拖放到HTML文本框？

3 个答案: