1. 程式人生 > >用clipboard做複製文字的功能程式碼

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