本教程详细介绍了如何使用实现点击按钮将一个文本输入框的内容复制到另一个文本输入框。文章涵盖了结构搭建、script dom元素选择、事件监听器绑定以及核心的数据复制逻辑，并提供了完整的代码示例和最佳实践建议，帮助开发者高效完成交互功能。
在中，经常需要实现用户界面元素的交互，其中一个常见需求是根据用户的操作，将一个输入框中的文本内容复制或显示到另一个输入框中。本教程将详细指导您如何使用纯JavaScript来实现这一功能，包括HTML结构的构建、JavaScript事件监听器的设置以及核心的数据传输逻辑。
1. HTML结构准备
首先，我们需要构建必要的HTML元素：两个文本输入框和一个触发复制操作的按钮。为了方便JavaScript选择和操作这些元素，我们将为它们分配唯一的id属性。同时，为了提供更好的可访问性，我们应正确地使用
文本框内容复制
源文本框:
目标文本框:
复制内容
在上述HTML代码中：
2. JavaScript核心逻辑
接下来，我们将编写JavaScript代码来实现复制功能。这主要包括三个步骤：获取DOM元素、绑定事件监听器以及定义复制逻辑。
2.1 获取DOM元素
首先，我们需要通过它们的id来获取对HTML元素的引用。使用document.getElementById()方法是实现这一目标的标准方式。为了代码的健壮性和可读性，建议使用const关键字来声明这些不会被重新赋值的变量。
秘塔写作猫
秘塔写作猫是一个集AI写作、校对、润色、配图等为一体的创作平台
下载
// 获取DOM元素 const sourceInput = document.getElementById('sourceTextBox'); const targetInput = document.getElementById('targetTextBox'); const copyBtn = document.getElementById('copyButton');
2.2 绑定事件监听器
我们希望当用户点击“复制内容”按钮时，才执行复制操作。这通过给按钮添加一个事件监听器来实现。addEventListener()方法是监听DOM事件的首选方式。我们将监听'click'事件，并指定一个在事件发生时执行。
// 绑定点击事件监听器 copyBtn.addEventListener('click', copyTextContent);
2.3 实现内容复制逻辑
最后，我们需要定义copyTextContent函数，该函数将在按钮被点击时执行。在这个函数内部，我们将获取源输入框的当前值，并将其赋给目标输入框的value属性。
重要提示： 对于或
// 定义复制文本内容的函数 function copyTextContent() { // 将源输入框的值赋给目标输入框的值 targetInput.value = sourceInput.value; }
2.4 完整的JavaScript代码
将以上所有部分整合到您的script.文件中：
// script.js // 获取DOM元素 const sourceInput = document.getElementById('sourceTextBox'); const targetInput = document.getElementById('targetTextBox'); const copyBtn = document.getElementById('copyButton'); // 定义复制文本内容的函数 function copyTextContent() { // 将源输入框的值赋给目标输入框的值 targetInput.value = sourceInput.value; } // 绑定点击事件监听器 // 注意：事件监听器只需在页面加载时绑定一次 copyBtn.addEventListener('click', copyTextContent);
3. 最佳实践与注意事项