用clipboard做复制文本的功能代码

最新推荐文章于 2024-08-15 16:24:59 发布

阿酷tony

最新推荐文章于 2024-08-15 16:24:59 发布

阅读量792

点赞数 1

分类专栏： html5 文章标签：复制文本

html5 专栏收录该内容

144 篇文章 6 订阅

订阅专栏

代码如下：

<input id="foo" value="这里是内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>
<script src="dist/clipboard.min.js"></script>
<script>
    new Clipboard('.btn');//首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。
<script>

如果要添加事件，可以这样：

<input id="foo" value="这里是内容">
<button class="btn" data-clipboard-target="#foo">点击复制</button>
<script src="dist/clipboard.min.js"></script>
<script>
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        alert("复制成功!");
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert("复制失败!");
    });
<script>

另一方式：

window.copyToClipboard = function(text) {
  // IE specific
  if (window.clipboardData && window.clipboardData.setData) {
    return clipboardData.setData("Text", text);
  }

  // all other modern
  target = document.createElement("textarea");
  target.style.position = "absolute";
  target.style.left = "-9999px";
  target.style.top = "0";
  target.textContent = text;
  document.body.appendChild(target);
  target.focus();
  target.setSelectionRange(0, target.value.length);

  // copy the selection of fall back to prompt
  try {
    document.execCommand("copy");
    target.remove();
    console.log('Copied to clipboard: "'+text+'"');
  } catch(e) {
    console.log("Can't copy string on this browser. Try to use Chrome, Firefox or Opera.")
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
}