javascript - 检测将文本放入输入元素中？

Question

并且还拒绝非文本项。这是为了让用户可以将文本拖放到输入字段中。如果用户尝试输入非文本，则不允许。

下面是检测拖放事件的方法:

   input_element.addEventListener("drop", function (event) {

        // `this` points to the input element

        // implement is_text

        if (is_text) {
            label_element.style.opacity = 0;
        } else {
            // reject
        }
    }, false);

标签元素不透明度设置为0，使标签消失。

我如何验证放置的“东西”实际上是文本？

这将指向

[Object HTMLInputElement]

.value 保存文本(如果有的话)。

但是 this.value 不会正确记录。 console.log(this.value) 不显示值，即使 dom 检查器显示。

事件举行

[ObjectDragEvent]

Answer 1

您可以通过放置事件的 event.dataTransfer.types 检测放置的数据是否为文本。

通过反复试验，我注意到它通常有 text/plain 和 text/html。删除图像时，它也有这些类型，但还有一个额外的类型(一些 uri 的东西)。

所以你可以这样做:

input_element.addEventListener("drop", function (event) {
    var types = event.dataTransfer.types;

    if (types.length > 2 || types.indexOf("text/plain") === -1)
        event.preventDefault();
    else
        input_element.style.opacity = "0";
}, false);

请注意，我只在 chrome 上测试过这个。这在其他浏览器上可能有不同的行为。某些 IE 版本甚至不支持我使用的 indexOf 方法。

示例:http://jsfiddle.net/DdbKD/4/