Question

我正在尝试为Safari编写一些用于处理'粘贴'事件的代码，但它似乎无法正常工作。根据WebKit DOM参考，oncut，onpaste和oncopy的处理方式或多或少都与W3C Clipboard API建议的一样。但是，它不像我期望的那样工作。我正在粘贴图像数据，但据我所知，我遇到的问题适用于任何类型的粘贴。这个jsfiddle在Chrome中运行得很好，但在OSX上的Safari 6.0.4中则不行。

$(function () {
    console.log("ready");
    $("#pastearea").on("paste", function (e) {
        e.preventDefault();
        console.debug("testing paste in safari");
        var blob = e.originalEvent.clipboardData.items[0].getAsFile();
        console.debug(blob);
        var reader = new FileReader();
        reader.onload = readerLoaded;

        reader.readAsDataURL(blob);
    });
});

function readerLoaded(e) {
    $("#dest").attr("src", e.target.result);
}

我再次尝试使用plain JS。仍然没有快乐：

<div id="pastearea" onpaste="plainjsOnPaste()" style="width: 100px; height: 100px; background-color: blue;"/>

function plainjsOnPaste(e) {
    console.log("blahblahblah");
    console.log(e);   
}

如果Safari存在一些问题，那么显然我不应该期望jQuery能够正常工作。据我所知，在第二次尝试（简单）中，我正在完成WebKit参考建议我应该做的事情，但它根本不起作用。这是Safari的一些已知限制，还是椅子和键盘之间的问题？

更新：似乎Safari没有实现W3C的Clipboard API工作草案。我正在研究解决方法，但如果有人知道我会喜欢听到它。

Answer 1

我认为答案尽管不尽如人意但是“不”。请参阅此WebKit错误：

https://bugs.webkit.org/show_bug.cgi?id=75891

如果您打算将粘贴数据接收到不是contentEditable，文本输入或文本区域的内容，我不知道有任何方法可以使当前版本的Safari执行此操作。

更新：在this JSFiddle中尝试解决方法，简化为仅处理文本，在Safari 6.0.5中不起作用。它尝试一种解决方法，在按下Cmd-V时自动聚焦隐藏文本字段，只是为了在Safari中启用粘贴。它确实阻止了“你不能粘贴蜂鸣声”，但没有发送粘贴事件，也没有任何东西粘贴到秘密输入中。

$(function () {
    $(window).bind('keydown', function (e) {
        // Cmd-V
        if (e.which == 86 && e.metaKey) {
            if (e.target.nodeName.toUpperCase() !== "INPUT")
                $('#secretinput').focus();
        }
    });

    $(window).bind('beforepaste', function (e) {
        return false;
    });

    $(window).bind('paste', function (e) {
        var clipboardData = e.originalEvent.clipboardData;
        console.log(clipboardData);
        $('#textdest').html(clipboardData.getData('text/plain'));
    });
});

Answer 2

不知道它是否对您有所帮助，但我使用屏幕外输入强制在页面上进行safari接受粘贴。这对我有所帮助：

我正在做：

脚本：

$(document).bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    // here using data from clipboard
});

$(function(){
   $('input.special').focus();
});

的CSS：

input.special{
position:absolute;
top:-40px;
}

HTML：

<input type="text" class="special" style="position: absolute;top:-40px;">

Safari是否正确处理粘贴事件？

2 个答案: