如何构建复制代码片段按钮及其重要性

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)}">

接下来，在代码块旁边或代码块内添加一个按钮，引用您之前创建的唯一标识符。我还选择在按钮文本旁边添加一个小剪贴板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中文网其他相关文章！