Does Safari work with insertion correctly?

Question

I am trying to write code for Safari to handle the insert event, but it looks like it is not working correctly. According to the WebKit DOM link, oncut , onpaste and oncopy processed more or less than the W3C clipboard API offers. However, this does not work as I expect. I am inserting image data, but as far as I could tell, the problem I am facing is with any type of paste. This jsfiddle works 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 only plain JS . There is no joy yet:

 <div id="pastearea" onpaste="plainjsOnPaste()" style="width: 100px; height: 100px; background-color: blue;"/> function plainjsOnPaste(e) { console.log("blahblahblah"); console.log(e); } 

If there is a problem with Safari, then obviously I should not expect jQuery to work. As far as I can tell, in the second attempt (simple) I do exactly what the link to WebKit offers, but this does not work at all. Is this some of Safari's famous limitation, or is it a problem between the chair and the keyboard?

Update: Safari doesn't seem to be implementing the W3C Clipboard APIs working draft. I am exploring workarounds, but if anyone knows, I would love to hear that.

Answer 1

I think the answer is as unsatisfactory as it may be, no. See This WebKit Error:

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

If you intend to get the paste data into something that is not contentEditable, text input or text area, I don’t know any method to make the current version of Safari do this.

Update: An attempt to work in this JSFiddle , simplified to process only text, does not work in Safari 6.0.5. It tries to work when the hidden text box automatically focuses when you press Cmd-V, only to enable paste in Safari. This prevents “you cannot insert a beep”, but the insert event is not dispatched and nothing is inserted 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')); }); }); 

Answer 2

I don’t know if this helps you, but I use off-screen input to make safari accept the insert on the page. It helped me like this:

I do:

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