移动端 - 复制内容至剪贴板

官方文档：https://clipboardjs.com/

脚本引入：clipboard.min.js

切记实例化：new ClipboardJS('.btn');  // .btn 是需要添加事件的元素，点击后，复制内容至剪切版

 

方式一：

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

结果：https://github.com/zenorocha/clipboard.js.git

 方式二：

<!-- Target -->

<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->

<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>

结果：Mussum ipsum cacilds...

 

方式一、二 操作的是  input / textarea  的内容

 

方式三：

<button class="btn" data-clipboard-text="123">
Copy to clipboard
</button>

结果：123

  

属性：

data-clipboard-target ： 用来触发事件，data-clipboard-target="#foo"  ，#foo 为存放了被复制内容的 元素 Id

data-clipboard-action：只有2个值，copy / cut ，字面意思，值确定触发事件时，是复制内容，还是剪切内容，默认为 copy 

 data-clipboard-text：data-clipboard-text=“1111”，则当触发事件时，复制的内容便是 1111 

 

清理事件：clipboard.destroy();

 

提示：

clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);

e.clearSelection();
});

clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});

通过判断 text 的值，来提示是否复制成功 ，为空未复制到内容。

 

转载于:https://www.cnblogs.com/JaneBlog/p/8493597.html