10

我正在尝试为 Safari 编写一些代码来处理“粘贴”事件，但它似乎无法正常工作。根据 WebKit DOM 参考，oncut、onpaste和oncopy都或多或少地像 W3C 剪贴板 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);
}

我再次尝试使用纯 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 的剪贴板 API 工作草案。我正在研究解决方法，但如果有人知道，我很想听听。

4

2 回答 2

10

我认为答案，尽管它可能不令人满意，是“不”。请参阅此 WebKit 错误：

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

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

更新：在这个 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'));
    });
});
于 2013-06-14T09:33:19.380 回答
0

不知道它是否对您有帮助，但我使用屏幕外输入来强制 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;">
于 2014-09-24T02:51:54.730 回答