wrap端以及pc端的复制与剪切 兼容各种版本浏览器的剪切板库!!!

clipboard.js是一个github上的开源项目,clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

clipboard.js项目主页:https://github.com/zenorocha/clipboard.js

1.引入库

<script type="text/javascript" src="${static_components }/clipboard/clipboard.min.js"></script>

2.操作

1.data-clipboard-text:里面代表要复制的文字

<div class="psw-btn" data-clipboard-text="*****">
   复制兑换码
</div>

==================js

var clipboard = new Clipboard('.psw-btn');//填入触发dom元素

clipboard.on('success', function(e) {
   alert('复制成功!') //====layer.msg('复制成功!');layer是一个提示框插件,就不用自己写样式了
    e.clearSelection();
});

2.data-clipboard-action="copy"//代表是cut还是copy  ,cut操作只适用于<input>或<textarea>元素。      

 data-clipboard-target="div"​​​​​​​//代表复制的目标元素


在这里输入文字:<textarea id="textarea1"></textarea><br>
在这里粘贴<textarea id="textarea2"></textarea><br>
 
 <!--测试4-->
 <!--测试,通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->
 <button class="btn4" data-clipboard-action="copy" data-clipboard-target="#textarea1">点击测试4</button>

var clipboard = new Clipboard('.btn4');//填入触发dom元素

clipboard.on('success', function(e) {

alert('复制成功!') //====layer.msg('复制成功!');layer是一个提示框插件,就不用自己写样式了 e.clearSelection(); });

e.clearSelection(); });

如果你的复制不成功,就要看看body有没有设置以下字眼,把他们去掉即可

 oncut="return false;" oncopy = "return false"千万不要加这些,不然用啥都复制剪切不了

猜你喜欢

转载自blog.csdn.net/chenkeyu1997/article/details/88997369
今日推荐