如何在输入框更新时同步修改禁用输入框的值？[HTML/JS]

首先假设你的HTML结构如下（可根据实际ID调整）：

<input type="text" id="input1" placeholder="可输入框1">
<input type="text" id="input2" placeholder="可输入框2">
<input type="text" id="disabledInput" disabled placeholder="合并结果">

方案1：原生JavaScript（现代无依赖） #

这种写法无需引入jQuery，轻量化且无过时API问题：

// 获取DOM元素
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const disabledInput = document.getElementById('disabledInput');

// 定义合并更新函数
function updateCombinedValue() {
  // 自定义合并规则，比如用连字符分隔，可按需修改
  const combinedValue = input1.value + '-' + input2.value;
  // 设置禁用输入框的值（必须用value属性，而非innerHTML）
  disabledInput.value = combinedValue;
}

// 给两个可输入框绑定input事件——覆盖所有输入场景（键盘、粘贴、拖拽等）
input1.addEventListener('input', updateCombinedValue);
input2.addEventListener('input', updateCombinedValue);

// 页面初始化时执行一次，确保禁用框显示初始合并值
updateCombinedValue();

方案2：更新后的jQuery写法（避免过时API） #

如果你仍需使用jQuery，替换成on()绑定input事件（替代过时的keyup/keypress直接绑定），同时修正值设置方法：

// 监听两个可输入框的input事件
$('#input1, #input2').on('input', function() {
  // 自定义合并规则
  const combinedValue = $('#input1').val() + '-' + $('#input2').val();
  // 用val()设置输入框值（替代过时的html()方法）
  $('#disabledInput').val(combinedValue);
});

// 初始化合并值
$('#disabledInput').val($('#input1').val() + '-' + $('#input2').val());

关键修正点说明 #

1. 替换事件类型：用input事件替代keyup/keypress，它能捕获所有输入操作（包括粘贴、右键菜单粘贴、拖拽文本等），比单纯的键盘事件覆盖更全面。
2. 修正值操作方法：输入框的内容存储在value属性中，必须用原生element.value或jQueryval()方法读写，html()是用来操作元素内部HTML的，不适用于输入框。
3. 同时监听两个输入框：原来的代码只处理了一个输入框，现在需要同时监听两个，确保任意一个输入变化都能实时更新合并结果。

可选：保留字符输入限制 #

如果需要保留原代码中限制输入字符的功能，可添加如下逻辑：

原生JS版本

function restrictInput(e) {
  const inputChar = String.fromCharCode(e.which || e.keyCode);
  // 只允许a-z、0-9、.、-，不区分大小写
  if (!/[a-z0-9.-]/i.test(inputChar)) {
    e.preventDefault(); // 阻止非法字符输入
  }
}

input1.addEventListener('keydown', restrictInput);
input2.addEventListener('keydown', restrictInput);

jQuery版本

$('#input1, #input2').on('keydown', function(e) {
  const inputChar = String.fromCharCode(e.which);
  if (!/[a-z0-9.-]/i.test(inputChar)) {
    e.preventDefault();
  }
});

内容的提问来源于stack exchange，提问作者Yash Rraj Sood