如何用JavaScript把一个输入框的内容复制到另一个输入框？

在网页交互里，经常需要把一个文本框输入的内容自动带到另一个文本框中，比如确认邮箱、重复密码，或者把配置项同步到预览框。用JavaScript实现这个功能并不复杂，核心就是读取源输入框的value属性，再把它写到目标输入框的value上。不过在实际项目中，还要考虑事件触发、框架响应以及不同输入框类型的兼容性。

一、最基础的原生写法

原生JavaScript操作DOM非常直接。我们可以先通过id或者querySelector拿到两个input节点，然后在源输入框的input事件里，把值赋给目标输入框。这样用户每敲一个字，另一个框就会跟着变。

这种写法不依赖任何库，在所有现代浏览器都能跑。缺点是如果页面用了Vue或React之类的框架，直接改value可能不会让框架的响应式数据更新，因为框架并不知道这次赋值。但对于纯静态页面或者传统多页应用，这已经足够。

// 获取源输入框和目标输入框
const sourceInput = document.getElementById('source');
const targetInput = document.getElementById('target');

// 监听输入事件，实时复制内容
sourceInput.addEventListener('input', function() {
  targetInput.value = sourceInput.value;
});

二、处理不同输入框类型

普通文本框、密码框、文本域在取值和赋值上用的都是value属性，所以上面的代码对它们都生效。但如果目标输入框被设置了disabled或者readOnly，赋值就会失败或被浏览器忽略。因此在复制前最好检查一下状态。

另外，像邮箱、数字等带格式的input，浏览器可能会在提交时做校验，但复制过程本身只是字符串传递，不会触发校验。如果你希望用户感知到内容已同步，可以顺便给目标框加个高亮样式。

function copyValue(src, dest) {
  if (dest.disabled || dest.readOnly) {
    console.warn('目标输入框不可写');
    return;
  }
  dest.value = src.value;
}

const src = document.querySelector('input[name="username"]');
const dest = document.querySelector('input[name="username_confirm"]');
src.addEventListener('input', () => copyValue(src, dest));

三、让框架感知到变化

在Vue或React里，如果直接用JS改DOM的value，框架的虚拟DOM未必会重新渲染。此时可以手动派发一个input事件，让框架的双向绑定监听到。下面以原生dispatchEvent为例。

这种做法兼容性好，也不需要引入框架内部API。注意事件要用可冒泡的Event对象，并且input事件在多数框架中都会被v-model或onChange捕获，从而实现数据同步。

function syncWithEvent(src, dest) {
  dest.value = src.value;
  // 派发input事件，通知监听者
  dest.dispatchEvent(new Event('input', { bubbles: true }));
}

document.getElementById('a').addEventListener('input', function() {
  syncWithEvent(this, document.getElementById('b'));
});

四、使用clipboard做中转的误区

有人想到用navigator.clipboard把内容写进剪贴板，再粘贴到另一个框，这反而把简单问题复杂化了。剪贴板操作需要用户授权，而且异步，会导致体验卡顿。除非你要跨应用复制，否则直接赋值value就是最优解。

总结来说，从文本框到另一个文本框的内容复制，优先用直接赋值加事件通知。代码量少、性能好，也更容易维护。遇到框架不同步时，补一个dispatchEvent就能解决大部分问题。

JavaScriptinput_copydom_operation修改时间：2026-08-03 21:15:23