使用JavaScript將文本複製到剪貼板

作爲一個開發人員，我們知道在代碼塊旁邊放一個“複製”按鈕有很多好處。並且在某些情況下，它對提高我們網站的可用性有很大的幫助。

在本文中，我們將只用幾行JavaScript文本複製到剪貼板。

爲了使大家更容易理解，我將使用Tailwind CSS設置應用程序的樣式，並使所有內容看起來都不錯。

因此，對於HTML部分，這將非常簡單（Tailwind CSS添加的一堆類除外）。

<main class="flex flex-col h-screen justify-center items-center bg-gray-100">  <div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">    <input      class="border-blue-500 border-solid border rounded py-2 px-4"      type="text"      placeholder="Enter some text"      id="copyMe"    />    <button      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"      onclick="copyMeOnClipboard()"    >      Copy    </button>  </div>  <p class="text-green-700"></p></main>

在這裏，有3個重要的地方需要注意：

• 輸入標籤的ID copyMe

• copyMeOnClipboard()按鈕標籤的功能

• 該p標籤

該ID copyMe將幫助我們訪問用戶輸入的值。當用戶單擊Copy按鈕時，它將觸發該copyMeOnClipboard()方法，該方法將處理副本並使用JavaScript動態顯示成功消息。

話雖如此，我們非常在可以移至JS文件並進行最後的修飾。

JavaScript

const copyText = document.querySelector("#copyMe")
const showText = document.querySelector("p")

const copyMeOnClipboard = () => {
  copyText.select()
  copyText.setSelectionRange(0, 99999) // used for mobile phone
document.execCommand("copy")
  showText.innerHTML = `${copyText.value} is copied`
  setTimeout(() => {
    showText.innerHTML = ""
  }, 1000)
}

如上所見，我們首先選擇所需的元素copyText和showText。它分別是輸入和段落標籤。然後，我們使用該copyMeOnClipboard()函數來處理邏輯。

該copyText元素（記住它的輸入標籤）爲我們提供了訪問select()方法和你可能已經猜到它選擇輸入文本字段的內容。

最後，我們使用複製命令，document.execCommand("copy")並在剪貼板上獲取文本。

現在，我們已經完成了，但是我們仍然可以通過向用戶顯示成功消息來對其進行一些改進。這很容易，因爲我們已經有了showText元素。我們唯一要做的就是將成功消息附加到，innerHTML並在1秒後將其刪除setTimeout()。