文章彙整

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

Astral WebBy Astral Web 2 weeks agoNo Comments
首頁  /  網站設計與開發  /  前端開發  /  前端開發:如何使用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,以及訂閱我們的電子報,隨時接收第一手新知分享唷!

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

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  前端開發網站設計與開發

留下回應

你的電子郵件地址不會被公開.

請到您的信箱確認,即可完成訂閱。