如何让隐藏输入框始终同步其他输入框值（含数据库初始值）

你的问题出在原代码只在keyup事件触发时才同步值，但页面加载时输入框的数据库初始值不会触发keyup，所以隐藏框拿不到初始内容。

最简单的修复方式是页面加载完成后主动执行一次同步逻辑，同时把同步代码抽成函数复用，避免重复写相同逻辑：

$(document).ready(function() {
  // 封装同步逻辑成函数
  function syncHiddenInput() {
    const textInput = $('input:text[name="'.$data['name'].'"]');
    $('input:hidden[id="'.$data['name'].'"]').val( "'.$data['id'].',' + textInput.val() );
  }

  // 页面就绪后立刻同步一次初始值
  syncHiddenInput();

  // 监听keyup事件，实时同步用户输入
  $('input:text[name="'.$data['name'].'"]').keyup(syncHiddenInput);
});

如果要覆盖更多输入场景（比如用户右键粘贴内容、用浏览器自动填充等，这些操作可能不会触发keyup），可以把keyup换成监听input和change事件，这样更稳妥：

$(document).ready(function() {
  function syncHiddenInput() {
    const textInput = $('input:text[name="'.$data['name'].'"]');
    $('input:hidden[id="'.$data['name'].'"]').val( "'.$data['id'].',' + textInput.val() );
  }

  syncHiddenInput();

  // 监听input（实时输入）和change（失焦后内容变化）事件
  $('input:text[name="'.$data['name'].'"]').on('input change', syncHiddenInput);
});

这样不管是页面加载时的初始值，还是用户后续的任何输入操作，隐藏输入框都会同步到最新的内容。

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