使用 JavaScript 创建点击复制按钮

本教程是关于使用简单的 javascript、html 和 css 创建点击复制实用程序的简短指南。

多年来，点击复制实用程序已成为编程界的流行模式。我经常看到开发人员使用它来快速复制 api 密钥、代码片段、数字等。

这种模式在更多技术领域的出现激发了许多现代网站在其产品中实施相同的设计，以提高用户的整体体验。

使用 JavaScript 创建点击复制按钮第1张

我们正在建设什么

单击复制实用程序可以采用多种形式，但我们将在本教程中使用一个简单的文本字段和按钮。输入后，可以通过单击“单击复制”按钮将文本字段的值复制到剪贴板。

See the Pen Click-to-copy JavaScript Component by Envato Tuts+ (@tutsplus) on CodePen.

1.从 HTML 标记开始

单击复制实用程序的 HTML 组件需要某种形式的用户输入元素。换句话说，用户可以在其中输入文本的文本输入或文本区域。

正如我提到的，您可以选择拥有一个已经存在预设文本的元素，例如代码片段。

本教程将重点关注该硬币的用户输入端。

<h1 class="heading">Click-to-copy JavaScript Component</h1>
<div class="copy-box">
  <input type="text" placeholder="Change me" />
  <button>Click-to-Copy</button>
</div>

我们从包含文本输入和按钮的简单 HTML 开始。带有.copy-box 类名的 div 包装控件，因此我们可以使用 CSS 定位它及其内容。

2.使用 CSS 设计实用程序的样式

我们可以使用一些简单的 CSS 将该实用程序转换为更实用、更美观的 UI。

您会注意到.alert CSS 中的一个类。该元素用于我们将使用 javaScript 动态添加的组件。

当用户在输入框内输入文本并单击“点击复制”按钮时，警报将显示在浏览器视口的下端并移至屏幕中间。我们使用calc() CSS 属性来利用数学来帮助确定正确的偏移量。

.heading {
  font-size: 14px;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  line-height: 1.5;
  background: #f8fafc;
  margin: 0;
}
.copy-box {
  background: #f9fafb;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  width: 400px;
  margin: 60px auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}
.copy-box input {
  color: #475569;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 16px;
  flex-grow: inherit;
  flex: 1;
}
.copy-box button {
  border-radius: 6px;
  appearance: none;
  background-color: #1d4ed8;
  color: white;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
}
.alert {
  position: fixed;
  bottom: 10px;
  right: calc(50% - (66px / 2)); /* width of half of alert element */
  background: black;
  color: white;
  padding: 4px 9px;
  border-radius: 6px;
  z-index: 10;
  font-size: 14px;
}

3.使用 JavaScript 调用点击复制功能

好的，我们三位一体的第三位。

构造函数模式

为了将代码设置为可重用，我倾向于编写使用构造函数模式的 JavaScript 类。因此，我们可以在每次需要时创建一个新实例，并在给定网站或网页上可能需要的不同点击复制实用程序上使用相同的功能。

本教程假设您在页面上有一个，但如果您需要扩展它，它可以扩展以考虑多个实用程序。

我将从创建一个名为ClickToCopy.

class ClickToCopy {}

知道我们有 button 元素和 input 元素作为目标，我将创建一个构造函数，使我们能够立即访问每个可能在初始化期间传递的元素。

然后我们可以在本教程的类之后设置一个新实例。

class ClickToCopy {
  constructor(target, content) {
    this.target = target
    this.content = content
  }
}
const target = document.queryselector("button")
const content = document.querySelector("input")
const copyHelper = new ClickToCopy(target, content)
copyHelper.initialize()

我们需要传递我们在constructor() 函数内部引用的两个实例以使用该类。

使用new关键字，我们创建了一个新的实例，ClickToCopy并将其分配给一个名为的变量copyHelper。

最后，我们可以调用一个我命名的函数initialize()，我们接下来将把它添加到类主体中。

class ClickToCopy {
  constructor(target, content) {
    this.target = target
    this.content = content
  }
  initialize() {
    this.listenForClick()
  }
  listenForClick() {
    let self = this
    this.target.addeventListener("click", (e) => {
      e.preventDefault()
      self.copy(self.content.value)
    })
  }
  copy(text) {
    const input = document.createElement("input")
    input.setAttribute("value", text)
    document.body.appendChild(input)
    input.select()
    let copiedResult = document.execCommand("copy")
    document.body.removeChild(input)
    const alert = document.createElement("div")
    alert.classList.add("alert")
    alert.textContent = "Copied!"
    // Customize where you might want to display the alert here 
    // I chose the broader body element for demonstration purposes 
    document.body.appendChild(alert)
    setTimeout(() => {
      document.querySelector(".alert").style.display = "none"
      document.body.removeChild(alert)
    }, 1000)
    // Optionally reset input contents 
    this.content.value = ""
    // Return the result that gets copied to the clipboard 
    return copiedResult
  }
}