JavaScript实现文本框内容复制：点击按钮从一个输入框到另一个-html教程-PHP中文网

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

php中文网

发布： 2025-12-06 19:16:02

原创

876人浏览过

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

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

核心概念：HTML元素与JavaScript交互

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

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

实现步骤

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

1. HTML结构准备

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

JoyPix AI

轻松制作AI视频、AI数字人，支持文生视频、声音克隆

175

查看详情

<!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>

登录后复制

代码说明：

立即学习“Java免费学习笔记（深入）”；