JavaScript中输入框值合并后无法复制的问题求助

问题根源 #

你的代码无法同步fullname2的核心原因是：只读输入框通过JavaScript直接修改value属性时，不会触发input事件。你给fullname绑定的input监听器只会在用户手动输入/界面操作修改内容时触发，通过setaddress()函数赋值的操作不会触发该事件，所以fullname2无法同步更新。

解决方案 #

下面提供两种简单可行的修复方式：

方案1：直接在合并函数中同步值（最简便） #

修改setaddress()函数，在生成全名后直接将值同时赋值给fullname和fullname2，不需要依赖事件监听：

function setaddress() {
  var fname = document.getElementById('fname').value;
  var mname = document.getElementById('mname').value;
  var lname = document.getElementById('lname').value;

  // 先拼接好全名
  var fullName = fname + " " + mname + " " + lname;
  // 同时赋值给两个只读输入框
  document.getElementById('fullname').value = fullName;
  document.getElementById('fullname2').value = fullName;
}

方案2：手动触发input事件（保留监听逻辑） #

如果你想保留原有的事件监听结构，可以在setaddress()中修改fullname的值后，手动触发input事件，让监听器捕获到变化：

function setaddress() {
  var fname = document.getElementById('fname').value;
  var mname = document.getElementById('mname').value;
  var lname = document.getElementById('lname').value;

  document.getElementById('fullname').value = fname + " " + mname + " " + lname;
  // 手动触发input事件，通知监听器更新
  document.getElementById('fullname').dispatchEvent(new Event('input'));
}

window.onload = function() {
  var src = document.getElementById("fullname"),
      dst = document.getElementById("fullname2");
  src.addEventListener('input', function() {
      dst.value = src.value;
  });
};

额外优化建议 #

• 可以处理空值情况，避免出现多余空格，比如当中间名为空时，不要出现连续空格：

  // 过滤空值后再拼接
  var nameParts = [fname, mname, lname].filter(part => part.trim() !== "");
  var fullName = nameParts.join(" ");
  

• 把onchange换成onkeyup或者oninput，这样用户输入时能实时更新全名，而不是失去焦点后才更新。

内容的提问来源于stack exchange，提问作者Rishabh Thakur