前端開發：如何使用Javascript實現複製到剪貼簿的功能

本篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦！想知道怎麼操作嗎？跟著以下說明試試看吧！

複製輸入框的內容：

HTML

<!-- 輸入框 -->
<input type="text" value="Hello World" id="myInput">


<!-- 複製輸入框內容 -->
<button onclick="copyInput()">複製輸入框</button>

Javascript

function copyInput() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}

複製文字區塊與瀏覽器支援判斷

HTML

<!-- 文字區塊 -->
<div id="text">慈母手中線，遊子身上衣。</div>

<!-- 複製文字 -->
<button onclick="copyText()">複製文字</button>

Javascript

function copyText() {
    var node = document.getElementById("text");
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
        document.execCommand("copy");
        alert("複製成功!");
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("copy");
        alert("複製成功!");
    } else {
        alert('無法複製內容、瀏覽器不支援');       
    }
}

以上就是本次的分享，也別忘了追蹤歐斯瑞臉書粉絲團、Instagram，以及訂閱我們的電子報，隨時接收第一手新知分享唷！

有任何問題也歡迎隨時與我們聯繫。