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

代码如下:

<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);
  }
}

猜你喜欢

转载自blog.csdn.net/ffffffff8/article/details/84938821