jQuery + clipboard.js——实现文本复制

出于项目需求，需要复制两种不同类型，一个是复制文本链接，一个是div内容。

首先引入jquery文件和clipboard.js文件。clipboard.js官网

1-复制文本链接

<button class="btn btn-primary col-xs-11 btn-copy"  
data-clipboard-action="copy"
data-clipboard 
data-clipboard-text="https://www.baidu.com" 
type="button">复制链接</button>

这个是html里的内容，需要注意的是data-clipboard、data-clipboard-text、data-clipboard-action 。

其中data-clipboard表明这是一个要复制的作用标签（这样说不知道合不合适，我知道它表明的是什么，但我好像有点讲不出来。）

data-clipboard-action表示是copy或者cut，cut操作只在<input>,<textart>标签上生效。

data-clipboard-text表示可以直接复制的文本内容。

2-复制div盒子里的内容

<div id="showMsg" class="product-msg col-xs-12">
  <p class="col-xs-12">名称</p>
  <p class="col-xs-12">你好我是复制文本</p>
  <p class="col-xs-12">
    <span class="pull-right text-red">折扣价：<strong >￥52.1</strong></span>
  </p>
  <p class="col-xs-12">快捷领取:右下角【一键复制】</p>
  <span class="TKL-input"></span>

  <button class="btn btn-primary col-xs-12 btn-copy" data-clipboard data-clipboard-target="#showMsg" type="button">一键复制</button>
  
</div>

值得注意的是<button>按钮中，data-clipboard-target属性，这个属性的值就是能匹配到另一个元素的选择器。

接下来是JS部分的代码，具体解释在代码里了。

//点击复制文本成功或失败

var $clipboard = $("[data-clipboard]");

if (Clipboard.isSupported()) { 
//Clipboard.isSupported()----检查浏览器是否支持 clipboard.js，
//如果不支持，可以隐藏复制/剪切按钮。
  $clipboard.show();
}


// 复制
new Clipboard("[data-clipboard]").on("success", function(event) {
  $(event.trigger);  //输出复制的内容
});