Does Safari handle the paste event correctly?

Question

I'm trying to write some code for Safari for handling the 'paste' event, but it doesn't seem to work right. According to the WebKit DOM reference, oncut, onpaste, and oncopy are all handled more-or-less like the W3C Clipboard API suggests. However, it doesn't work like I expect. I'm pasting image data, but as far as I've been able to tell, the problem I'm having applies to any kind of paste. This jsfiddle works just fine in Chrome, but not in Safari 6.0.4 on OSX.

$(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);
}

I tried again using just plain JS. Still no joy:

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

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

If there's some issue with Safari, then obviously I shouldn't expect jQuery to work. As far as I can tell, in the second attempt (plain) I'm doing exactly what the WebKit reference suggests I should do, but it doesn't work at all. Is this some known limitation of Safari, or is the problem between the chair and keyboard?

Update: it seems that Safari doesn't implement the W3C's working draft of the Clipboard APIs. I'm researching workarounds, but if anyone knows one I'd love to heard it.

It seems Safari needs some sort of input area where you can make the paste happen, using `contentEditable=true` will trigger the event in Safari http://jsfiddle.net/RrP8X/ — methodofaction, Jun 05 '13 at 02:51
@Duopixel why a comment and not an answer? That's a perfectly valid answer (even better if you can cite a source for that...) — Ben Collins, Jun 05 '13 at 03:02
It would also be preferable to do this without setting contentEditable - this has some undesirable side-effects, such as showing a textarea cursor on focus. — Ben Collins, Jun 05 '13 at 03:14
It's not an answer precisely because it's not an ideal solution. Just meant to set you in the right direction. I have the time to help but not the time to solve. Good luck! — methodofaction, Jun 05 '13 at 03:32

score 10 · Accepted Answer · edited Jun 21 '16 at 17:35

I think the answer, as unsatisfying as it might be, is "no". See this WebKit bug:

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

If your intention is to receive paste data into something that's not contentEditable, a text input or a text area, I don't know of any method to make the current version of Safari do this.

Update: an attempted work-around in this JSFiddle, simplified to only deal with text, does not work in Safari 6.0.5. It attempts a work-around where a hidden text field is automatically focused when Cmd-V is pressed, just in order to enable pasting in Safari. It does prevent the "you can't paste beep", but no paste event is sent and nothing is pasted into the secret input.

$(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'));
    });
});

@Juhana whoops looks like you copied in some code into this answer which I intentionally omitted from it. Feel free to write a new answer if you'd like to answer this in a different way than I did. Thanks! :) — Alexander Ljungberg, Jun 22 '16 at 18:08

score 0 · Answer 2 · answered Sep 24 '14 at 02:51

Don't know if it helps you, but I use a out-of-screen input to force safari accept paste on the page. It helped me so here it goes:

I'm doing:

script:

$(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;">

Does Safari handle the paste event correctly?

2 Answers2

Linked