Getting clipboard data using javascript?

Question

I am using Html5 and JQuery.

Html

<canvas style="border:1px solid grey;" id="cc" width="1000" height="800">

Javascript:

var pasteCatcher;
if (!window.Clipboard){
 if(navigator.userAgent.indexOf("Firefox")>0){
    pasteCatcher = document.createElement("div");
    pasteCatcher.setAttribute("id", "paste_ff");
    pasteCatcher.setAttribute("contenteditable", "");
    pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;';
    pasteCatcher.style.marginLeft = "-20px";
    document.body.appendChild(pasteCatcher);
    pasteCatcher.focus();

    document.getElementById('paste_ff').addEventListener('DOMSubtreeModified',function(){
        if(pasteCatcher.children.length == 1){
                        var canvas = document.getElementById("cc");
                         var ctx = canvas.getContext("2d");
            img = pasteCatcher.firstElementChild.src;
            var img2 = new Image();
            img2.onload = function(){
                ctx.drawImage(img2, 0, 0);
                }
            img2.src = img;
            pasteCatcher.innerHTML = '';
            }
        },false);
    }
 }

Above code is working fine. When the clipboard has image then that will be set to canvas. IF the clipboard has text then how can i get the text and draw in canvas?

Thanks!

Yeah, I didn't read it that well, I thought you where doing something that would require Flash. — adeneo, Mar 10 '14 at 14:45
No..no flash is required..It is working fine when clipboard has an image.Now if the clipboard has text then how can i get that text and fill the text in canvas? — user755806, Mar 10 '14 at 14:46
Without the user pasting that text into the canvas, just extracting it from the clipboard ? — adeneo, Mar 10 '14 at 14:48
nope..user clicks ctrl+V then only we need to extract it and set into canvas since FF has security issues.. — user755806, Mar 10 '14 at 14:49
http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser — adeneo, Mar 10 '14 at 14:57

score 0 · Answer 1 · answered Mar 10 '14 at 17:42

As you've discovered, access to the clipboard varies across browsers for security reasons.

Even the methods used to read/write the clipboard vary.

A workaround:

Have the users paste the text into an html textarea and then read the textarea value.

The benefits of the workaround are:

The user must paste somewhere anyway, so let that be the textarea.
The textarea can be edited by the user if they desire.
The textarea value is not restricted for security reasons, so it works cross-browser.

Getting clipboard data using javascript?

Html

Javascript:

1 Answers1