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

陆砚码

2026-09-11 • 👁 0人浏览过

本教程详细介绍了如何使用 java script实现点击按钮将一个文本输入框的内容复制到另一个文本输入框。文章涵盖了 html 结构搭建、 javascript dom元素选择、事件监听器绑定以及核心的数据复制逻辑，并提供了完整的代码示例和最佳实践建议，帮助开发者高效完成前端交互功能。在前端开发中，经常需要实现用户界面元素的交互，其中一个常见需求是根据用户的操作，将一个输入框中的文本内容复制或显示到另一个输入框中。本教程将详细指导您如何使用纯JavaScript来实现这一功能，包括HTML结构的构建、JavaScript事件监听器的设置以及核心的数据传输逻辑。 1. HTML结构准备首先，我们需要构建必要的HTML元素：两个文本输入框和一个触发复制操作的按钮。为了方便JavaScript选择和操作这些元素，我们将为它们分配唯一的id属性。同时，为了提供更好的可访问性，我们应正确地使用元素并将其for属性与输入框的id关联。




    
    
    文本框内容复制
    


    
        源文本框:
        
    
    
        目标文本框:

在上述HTML代码中： sourceTextBox 是我们将从中复制内容的源输入框。 targetTextBox 是我们将内容复制到的目标输入框。 copyButton 是触发复制操作的按钮。 2. JavaScript核心逻辑接下来，我们将编写JavaScript代码来实现复制功能。这主要包括三个步骤：获取DOM元素、绑定事件监听器以及定义复制逻辑。立即学习 “ Java免费学习笔记（深入） ”； 2.1 获取DOM元素首先，我们需要通过它们的id来获取对HTML元素的引用。使用document.getElementById()方法是实现这一目标的标准方式。为了代码的健壮性和可读性，建议使用const关键字来声明这些不会被重新赋值的变量。 Eclipse导入Android或其他的JAVA项目的正确方法 WORD版本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看下载

// 获取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属性。重要提示：对于或

等表单元素，要获取或设置其内容，应使用它们的value属性，而不是innerHTML。innerHTML用于获取或设置元素的HTML内容，而value专门用于表单元素的用户输入值。
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">// 定义复制文本内容的函数
function copyTextContent() {
    // 将源输入框的值赋给目标输入框的值
    targetInput.value = sourceInput.value;
}</code></div>
2.4 完整的JavaScript代码
将以上所有部分整合到您的script.
js
文件中：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">// 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);</code></div>
3. 最佳实践与注意事项
使用const声明变量：
对于那些在程序生命周期中不会被重新赋值的变量（如DOM元素的引用），使用const关键字是更好的选择，它能提高代码的可读性和防止意外的修改。
<button> vs <input type="button">：
尽管<input type="button">可以工作，但现代HTML推荐使用<button type="button">。<button>元素在内容上更加灵活（可以包含文本、图标等），并且语义上更清晰地表达了其作为按钮的作用。
value属性的重要性：
再次强调，对于input元素，请务必使用.value来获取或设置其文本内容，而不是.innerHTML。.innerHTML主要用于获取或设置元素的子HTML结构。
事件监听器只绑定一次：
addEventListener应该在页面加载时执行一次，而不是在每次
点击事件
的回调函数内部重复绑定。在上述代码中，copyBtn.addEventListener('click', copyTextContent);被放置在全局
作用域
，确保了这一点。
脚本位置：
将<script>标签放在</body>闭合标签之前是一个好习惯。这样可以确保在JavaScript代码执行时，所有的HTML元素都已经加载并可供操作，避免了因DOM元素未加载而导致的错误。
4. 总结
通过本教程，您已经学会了如何使用JavaScript实现一个基本的文本框内容复制功能。这包括了HTML元素的正确设置、JavaScript中DOM元素的获取、事件监听器的绑定以及核心的value属性操作。掌握这些基本概念是进行更复杂前端交互开发的基础。希望这个教程能帮助您更好地理解和应用JavaScript在网页交互中的作用。
                            </div>

<nav class="phpwebsoft-article-nav" aria-label="文章导航">

<a href="http://www.phpwebsoft.com/news/4683.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">Js中setTimeout()和setInterval() 何时被调用执行的用法_基础知识</div>
                                    </div>
                                </a>

<a href="http://www.phpwebsoft.com/news/4700.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">如何在CSS中实现Flexbox卡片悬停效果_Transform scale与Flex布局结合应用</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="phpwebsoft-content-section" style="margin-top: 20px;">
                        <h2 class="phpwebsoft-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="phpwebsoft-article-list">

<li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4683.html" class="phpwebsoft-article-link">Js中setTimeout()和setInterval() 何时被调用执行的用法_基础知识</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4672.html" class="phpwebsoft-article-link">html图片怎么居中_图像对齐方式设置速通【技巧】</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4640.html" class="phpwebsoft-article-link">jquery validate.js表单验证的基本用法入门</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4627.html" class="phpwebsoft-article-link">vue实现选择商品规格功能</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4587.html" class="phpwebsoft-article-link">IE7不兼容_html/css_WEB-ITnose</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4700.html" class="phpwebsoft-article-link">如何在CSS中实现Flexbox卡片悬停效果_Transform scale与Flex布局结合应用</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4711.html" class="phpwebsoft-article-link">W3C盒子模型与IE盒子模型有什么区别</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4740.html" class="phpwebsoft-article-link">PS怎么设计逼真立体的3D文字?</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4795.html" class="phpwebsoft-article-link">如何兼容不同浏览器去除下划线？</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/4797.html" class="phpwebsoft-article-link">html5嵌入页面缓存不刷新_html5嵌入页缓存清除法【方案】</a>
                                <div class="phpwebsoft-article-meta">2026-09-11</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="phpwebsoft-sidebar phpwebsoft-sidebar-right" aria-label="侧边栏">
    
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">推荐阅读</h3>
        <div class="phpwebsoft-recommend-grid">

<a href="http://www.phpwebsoft.com/news/20977.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="jimdo怎么插入html5进度指示器_jimdo进度指示器html5代码与样式【方法】">
                </div>
                <div class="phpwebsoft-recommend-title">jimdo怎么插入html5进度指示器_jimdo进度指示器html5代码与样式【方法】</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20976.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="HTML图片轮播图添加指示器怎么做？">
                </div>
                <div class="phpwebsoft-recommend-title">HTML图片轮播图添加指示器怎么做？</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20975.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="css如何让图标颜色跟随文字变化_利用currentColor继承颜色">
                </div>
                <div class="phpwebsoft-recommend-title">css如何让图标颜色跟随文字变化_利用currentColor继承颜色</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20970.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="什么是 JavaScript 的装饰器在自动依赖注入框架中的应用？">
                </div>
                <div class="phpwebsoft-recommend-title">什么是 JavaScript 的装饰器在自动依赖注入框架中的应用？</div>
            </a>

</div>
    </div>

<div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">最新文章</h3>
        <ul class="phpwebsoft-article-list">

<li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20977.html" class="phpwebsoft-article-link">jimdo怎么插入html5进度指示器_jimdo进度指示器html5代码与样式【方法】</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20976.html" class="phpwebsoft-article-link">HTML图片轮播图添加指示器怎么做？</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20975.html" class="phpwebsoft-article-link">css如何让图标颜色跟随文字变化_利用currentColor继承颜色</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20970.html" class="phpwebsoft-article-link">什么是 JavaScript 的装饰器在自动依赖注入框架中的应用？</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20966.html" class="phpwebsoft-article-link">使用 React 的 useState 修改数组中元素的状态</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20958.html" class="phpwebsoft-article-link">阻止移动设备(手机、pad)浏览器双击放大网页的方法_html5教程技巧</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>

</ul>
    </div>

<div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">热门标签</h3>
        <div class="phpwebsoft-article-tag-list">

<a href="http://www.phpwebsoft.com/tag/4589" class="phpwebsoft-article-tag-item">点击事件</a>
    
            <a href="http://www.phpwebsoft.com/tag/3640" class="phpwebsoft-article-tag-item">回调函数</a>
    
            <a href="http://www.phpwebsoft.com/tag/2595" class="phpwebsoft-article-tag-item">前端开发</a>
    
            <a href="http://www.phpwebsoft.com/tag/2306" class="phpwebsoft-article-tag-item">html元素</a>
    
            <a href="http://www.phpwebsoft.com/tag/1894" class="phpwebsoft-article-tag-item">前端</a>
    
            <a href="http://www.phpwebsoft.com/tag/1717" class="phpwebsoft-article-tag-item">作用域</a>
    
            <a href="http://www.phpwebsoft.com/tag/1713" class="phpwebsoft-article-tag-item">js</a>
    
            <a href="http://www.phpwebsoft.com/tag/1687" class="phpwebsoft-article-tag-item">html</a>
    
            <a href="http://www.phpwebsoft.com/tag/1685" class="phpwebsoft-article-tag-item">javascript</a>
    
            <a href="http://www.phpwebsoft.com/tag/1664" class="phpwebsoft-article-tag-item">Java</a>

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="phpwebsoft-footer">
        <div class="phpwebsoft-container">
            <div class="phpwebsoft-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.phpwebsoft.com/22.html" class="phpwebsoft-footer-link">免责声明</a>
                
                <a href="http://www.phpwebsoft.com/23.html" class="phpwebsoft-footer-link">关于我们</a>
                
                <a href="http://www.phpwebsoft.com/24.html" class="phpwebsoft-footer-link">联系我们</a>
                
                <a href="http://www.phpwebsoft.com/25.html" class="phpwebsoft-footer-link">投诉删除</a>
                
                <a href="http://www.phpwebsoft.com/26.html" class="phpwebsoft-footer-link">投稿须知</a>
                
                
            </div>
            <div class="phpwebsoft-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 websoft网络软件专家
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025061481号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="phpwebsoft-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>