clipboardjs 通过 html5 data标签属性实现粘贴复制

clipboardjs 通过 html5 data标签属性实现粘贴复制,优点是简单无需写过多的代码。

先决条件

//网页加载完成后 初始化clipboard对象 #btn 为触发事元素的id，也可以是.btn及样式class名称
var clipboard = new ClipboardJS('#btn');

data-clipboard-target

<!-- 目标 -->
<input id="foo" value="这里是会被复制的内容">
<!-- 触发器 -->
<input class="btn" data-clipboard-target="#foo" type="button"  value="点击复制">

在线试一试

data-clipboard-action

<!-- 目标 -->
<input id="foo" value="这里是会被复制的内容">
<!-- data-clipboard-action 可以设置是否为剪切模式 只在输入框或文本域下有效 -->
<input class="btn" data-clipboard-action="cut"  data-clipboard-target="#foo"
 type="button"  value="点击复制">

在线试一试

data-clipboard-text

<!-- 通过data-clipboard-text来设置需要被复制的内容 -->
<input class="btn" data-clipboard-text="需要被复制的内容" type="button" value="复制">

在线试一试