JavaScript 如何實作點擊按鈕複製文字功能？-js教程-PHP中文網

JavaScript 如何實作點擊按鈕複製文字功能？

WBOY

發布： 2023-10-20 18:31:41

原創

1489 人瀏覽過

JavaScript 如何实现点击按钮复制文本功能？

JavaScript 如何實作點擊按鈕複製文字功能？

在現代的網路應用程式中，我們經常會遇到需要複製文字的情況，例如複製分享連結、複製優惠碼等等。而JavaScript提供了一種簡單而強大的方法來實現這項功能，即透過監聽按鈕的點擊事件並呼叫瀏覽器提供的剪貼簿API來實現文字的複製。

首先，我們需要一個HTML檔案來實作按鈕和文字方塊。程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮复制文本</title>
</head>
<body>
    <input type="text" id="textToCopy" value="待复制的文本">
    <button id="copyButton">复制文本</button>
    <script src="script.js"></script>
</body>
</html>

登入後複製

在上面的程式碼中，我們建立了一個文字方塊和一個按鈕，並且給它們分別設定了一個id來進行後續的操作。

接下來，我們需要在JavaScript檔案中編寫複製文字的邏輯程式碼。創建一個script.js文件，並添加以下程式碼：

window.onload = function() {
    var copyButton = document.getElementById("copyButton");
    copyButton.addEventListener("click", function() {
        var textToCopy = document.getElementById("textToCopy");
        textToCopy.select();
        document.execCommand("copy");
        alert("已复制文本：" + textToCopy.value);
    });
};

登入後複製

在上面的程式碼中，我們透過getElementById方法分別取得了按鈕和文字方塊的引用，然後使用addEventListener方法監聽按鈕的點擊事件。在點擊事件的回呼函數中，我們首先透過getElementById方法取得了待複製文字的引用，然後呼叫其中的select方法將文字方塊的文字內容選中，接著使用document.execCommand("copy")指令來執行複製操作，最後彈出一個提示框顯示已複製的文字。

為了確保頁面載入完成後再執行JavaScript程式碼，我們使用了上面程式碼中的window.onload方法。這樣，當頁面載入完成後， JavaScript程式碼就會被執行。

現在，我們可以在瀏覽器中開啟HTML文件，並試著點擊按鈕，然後再貼上到其他地方，就能看到複製的文字成功傳遞了。

以上就是使用JavaScript實作點選按鈕複製文字功能的具體程式碼範例。透過監聽按鈕的點擊事件、選取文字方塊、呼叫瀏覽器提供的剪貼簿API，我們可以輕鬆實現文字的複製功能，讓使用者更方便分享和複製內容。

以上是JavaScript 如何實作點擊按鈕複製文字功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！