如何構建複製代碼段按鈕以及為什麼重要

2025年以來，我一直飽受腕管綜合徵的困擾。為了緩解疼痛，我嘗試使用語音進行編碼、網絡瀏覽和電腦操作。這並非易事，除非您親身體驗，否則很難理解技術對行動不便人士的敵意有多大。認識我的人都知道，我一直是無障礙網絡和無障礙實踐的堅定支持者，但這是我第一次經歷手部活動受限，我從未意識到讓用戶只需最少操作就能完成任務的重要性。

使用語音命令突出顯示代碼塊並複制它們極其困難，至少對我來說目前是不可能的（要么真的不可能，要么是我還沒找到方法。不用手操作電腦進行網絡瀏覽和編碼需要極大的腦力）。因此，在撰寫關於代碼的文章時，尤其是在創建涉及讀者復制粘貼代碼的教程時，絕對必須提供一種方法，讓手部活動受限的人能夠一鍵複製代碼。

在患上腕管綜合徵之前，我認為複制代碼按鈕是多餘的。但我錯了。因此，我的第一個基於語音的編碼任務就是在博客文章中所有代碼片段添加複制代碼按鈕。我正在撰寫另一篇博客文章，講述我的語音編碼歷程，但如果您感興趣，我一直在使用的工具是VSCode中的Talon和Cursorless。用語音重新學習如何在電腦上完成所有操作需要一個陡峭的學習曲線，但這整個過程已經讓我減輕了一些疼痛。是的，我盡可能地用語音撰寫這篇博客文章。

我的複制代碼片段按鈕解決方案是用純HTML、CSS和JavaScript在使用JavaScript模板引擎的Eleventy項目中編寫的（因此使用了帶花括號的字符串插值）。

HTML（以及一些構建HTML的初步JavaScript）

在關於代碼的博客文章中，您可能在一頁上有多個代碼塊片段。因此，您需要為每個代碼塊分配一個唯一的ID，以便定位要復制的正確內容。您可以通過任何您喜歡的方式生成唯一的ID，例如使用外部庫來生成，但這是我在構建時為每個代碼片段所做的。

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

鑑於格式化和語法高亮的代碼塊將包含額外的HTML和CSS類來增強格式和高亮顯示，我們需要確保複製按鈕僅將**原始代碼內容**複製到剪貼板。我的解決方案是將原始代碼字符串存儲在元標記中，以便在JavaScript中輕鬆檢索（與去除多餘的HTML標記相比；即使那樣，我們也不想從HTML代碼片段中去除HTML標記！）。在元標記中存儲原始代碼字符串時，您還需要使用`encodeURIComponent`，這樣代碼就不會在頁面上執行（例如JavaScript代碼）。此元標記位於我博客文章中每個代碼塊的旁邊。

<meta data-code-id="${thisCodeID}" data-code-to-copy="${encodeURIComponent(codeSnippet)}"></meta>

接下來，在代碼塊旁邊或代碼塊內添加一個按鈕，引用您之前創建的唯一標識符。我還選擇在按鈕文本旁邊添加一個小剪貼板SVG圖標。如果您選擇省略按鈕文本而只使用圖標，請確保使用`aria-label`來確保按鈕具有輔助技術（如屏幕閱讀器）可以理解的可訪問名稱（例如，“複製代碼片段”）。

複製

CSS樣式

我不會規定如何在您自己的博客文章中設置此復制按鈕的樣式，但我選擇將其絕對定位在每個代碼塊的右上角。確保您在按鈕上包含焦點、活動和焦點可見的樣式，以確保那些不用鼠標閱讀博客文章並使用鍵盤或語音導航可點擊元素的人清楚地知道哪個元素當前處於焦點狀態以及已被點擊。

JavaScript代碼

最後，使用JavaScript查找頁面上的每個複制按鈕，並為每個按鈕添加以下事件偵聽器。此代碼從按鈕中獲取原始代碼片段的唯一標識符，查找相關的元標記，並將存儲在該元標記中的原始代碼複製到剪貼板。確保使用`decodeURIComponent`將原始代碼片段複製到其原始形式。

function makeId(length) {
  let result = "";
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

此解決方案可以很好地轉移到您最喜歡的前端框架。記住，暫時性的殘疾可能發生在任何人身上；我們誰都不是不朽的。

以上是如何構建複製代碼段按鈕以及為什麼重要的詳細內容。更多資訊請關注PHP中文網其他相關文章！