J*aScript实现文本框内容复制：点击按钮从一个输入框到另一个

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript实现文本框内容复制：点击按钮从一个输入框到另一个

2025-12-06

浏览次数：次

返回列表

JavaScript实现文本框内容复制：点击按钮从一个输入框到另一个

本教程详细讲解如何使用j*ascript实现点击按钮后，将一个文本输入框的内容复制到另一个文本输入框。文章将涵盖html结构设计、j*ascript事件监听与dom操作的核心概念，重点介绍如何正确获取和设置输入框的`value`属性，并提供最佳实践与注意事项，帮助开发者构建交互式网页功能。

核心概念：HTML元素与J*aScript交互

在网页开发中，实现元素间的交互是基础且重要的技能。要将一个文本框的内容复制到另一个文本框，并由按钮点击触发，我们需要掌握以下几个核心概念：

获取DOM元素： J*aScript通过document.getElementById()等方法，根据元素的id属性来获取对特定HTML元素的引用。
访问/设置输入框值： 对于或这类表单元素，其当前显示的值存储在其value属性中。我们可以通过element.value来读取，也可以通过element.value = '新值'来设置。
事件监听： 使用addEventListener()方法，可以为HTML元素绑定事件（如click点击事件），当事件发生时，会执行预先定义好的J*aScript函数。

实现步骤

我们将通过构建一个简单的示例来演示如何实现这一功能。

1. HTML结构准备

首先，我们需要定义两个文本输入框和一个按钮。为了方便J*aScript访问，每个元素都应有一个唯一的id。同时，为了更好的用户体验和可访问性，推荐使用标签与输入框关联，并使用

简小派

简小派是一款AI原生求职工具，通过简历优化、岗位匹配、项目生成、模拟面试与智能投递，全链路提升求职成功率，帮助普通人更快拿到更好的 offer。

123 查看详情简小派

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框内容复制示例</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        div { margin-bottom: 10px; }
        input[type="text"] { padding: 8px; width: 200px; }
        button { padding: 10px 15px; cursor: pointer; }
    </style>
</head>
<body>
    <div>
        <label for="sourceTextBox">源文本框:</label>
        <input type="text" id="sourceTextBox" placeholder="请输入内容">
    </div>
    <div>
        <label for="targetTextBox">目标文本框:</label>
        <input type="text" id="targetTextBox" placeholder="复制后的内容" readonly>
    </div>
    <div>
        <button type="button" id="copyButton">复制内容</button>
    </div>

    <script src="app.js"></script>
</body>
</html>

代码说明：