使用javascript获取剪贴板数据？答案

【问题标题】：Getting clipboard data using javascript?使用javascript获取剪贴板数据？
【发布时间】：2014-03-13 20:01:38
【问题描述】：

我正在使用 Html5 和 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);
    }
 }

以上代码运行良好。当剪贴板有图像时，它将被设置为画布。 如果剪贴板有文本，那么如何获取文本并在画布中绘制？

谢谢！

【问题讨论】：

在 FF 中也可以使用。
是的，我没看清楚，我以为你在哪里做需要 Flash 的事情。
否..不需要闪光灯..当剪贴板有图像时它工作正常。现在如果剪贴板有文本那么我如何获取该文本并将文本填充到画布中？
无需用户将该文本粘贴到画布中，只需从剪贴板中提取它？
nope..用户点击 ctrl+V 然后我们只需要提取它并设置到画布中，因为 FF 存在安全问题..

标签： javascript jquery html canvas

【解决方案1】：

正如您所发现的，出于安全原因，对剪贴板的访问因浏览器而异。

甚至用于读取/写入剪贴板的方法也各不相同。

解决方法：

让用户将文本粘贴到 html textarea 中，然后读取 textarea 值。

该变通办法的好处是：

无论如何用户都必须粘贴到某个地方，所以让它成为 textarea。
用户可以根据需要编辑文本区域。
出于安全原因，textarea 值不受限制，因此可以跨浏览器使用。

【讨论】：