如何使用js或者jq获得粘贴板里的内容?

场景:

现在需要把我复制的好的内容粘贴到指定的容器内?求教这个需要怎么破?

HTML代码

<input type="button" value="粘贴" class="pastBtn">
<input type="text" value="" class="pasteContainer">

JS代码

$('.pastBtn').click(function(){
    var text = '';//获得剪切板内容。  
    $('.pasteContainer').val(text);  
})

补充一下:

粘贴板里已经存在内容,我想要做的是直接把粘贴板的内容拿出来,放到我指定的容器里。这个内容可能是从别处(不是当前页面)获得。

阅读 17.8k
2 个回答

两种办法:
1、纯JS手段:

js目前是被禁止直接操作剪切板的。
可以用js调用浏览器的[复制]和[粘贴]功能,不过多数浏览器貌似都屏蔽了,如果是自己开发的浏览器可以改,否则就只能先试再用了。

因为只能调用浏览器自带的,所以用$('.pasteContainer').val(text);这种是不行的,这点要注意。

内容选择(其实就是光标选取):

        var range = document.createRange();
        range.selectNode(document.getElementById("content"));
        window.getSelection().addRange(range);

查看选择的内容:

console.log(window.getSelection().toString());

复制选择的内容到剪切板:

document.execCommand("copy");

注意这个方法虽然兼容性最高,但可行性并不是100%的,取决于你的浏览器是否允许document.execCommand("copy");
建议你先用鼠标手动选取一段内容,之后在console里执行这句看看结果,如果是true那就可以用。
图片描述
关于document.execCommand的文档,参见:
https://developer.mozilla.org...

2、Flash插件模式
这种方法是国内多数网站使用的方法,一般来讲只要浏览器同时支持js和flash,就能执行。因为复制动作是由flash插件来做的,浏览器不管,而flash拥有非常高的权限,所以就可以对剪切板做操作了。
但这个方法可以局限性也很大,对于没有装flash插件的ie或firefox,不能用。对于移动端,不能用。而且说不准什么时候浏览器就不再支持flash了。

这个方法就不细讲了,给个参考用的插件吧:
ZeroClipboard
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. http://zeroclipboard.org/

总之,目前没有十全十美的好方法来操作剪切板,毕竟剪切板是系统的,而浏览器只是个沙盒,这不是个技术问题,这是个安全问题。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题