如何用JavaScript区分输入框中的预填充值与手动输入值？

可以实现，原生JS本身没有内置属性直接区分输入值是通过代码填充还是手动输入的，但我们可以通过自定义标记或者事件监听来实现这个需求，下面是两种可行的方案：

方案一：利用自定义数据属性（dataset）标记来源 #

通过给输入框添加自定义数据属性，记录值的来源。当通过代码填充数据库数据时手动设置标记，当用户手动输入时更新标记。

<input id="text1" />
<input id="text2" />

<script>
// 模拟从数据库填充text1
const text1 = document.getElementById('text1');
text1.value = '数据库返回的内容';
// 标记来源为数据库
text1.dataset.inputSource = 'database';

// 监听所有输入框的手动输入事件，更新来源标记
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', () => {
    input.dataset.inputSource = 'manual';
  });
});

// 封装检查来源的函数
function getInputSource(inputId) {
  const input = document.getElementById(inputId);
  return input.dataset.inputSource || '未知';
}

// 测试示例
console.log(getInputSource('text1')); // 初始输出"database"，手动修改后变为"manual"
console.log(getInputSource('text2')); // 手动输入后输出"manual"
</script>

方案二：通过事件触发状态标记 #

手动输入会触发input、change等原生事件，而直接通过JS给value赋值不会触发这些事件（除非手动调用dispatchEvent）。我们可以利用这一点，用一个变量记录输入是否来自用户交互。

<input id="text1" />
<input id="text2" />

<script>
const text1 = document.getElementById('text1');
const text2 = document.getElementById('text2');

// 初始化状态：默认不是手动输入
text1._isManualInput = false;
text2._isManualInput = false;

// 填充数据库数据
text1.value = '数据库内容';

// 监听输入事件，标记为手动输入
[text1, text2].forEach(input => {
  input.addEventListener('input', () => {
    input._isManualInput = true;
  });
});

// 检查是否为手动输入的函数
function isManualInput(inputId) {
  const input = document.getElementById(inputId);
  return input._isManualInput || false;
}

// 测试示例
console.log(isManualInput('text1')); // 初始输出false，手动修改后变为true
console.log(isManualInput('text2')); // 手动输入后输出true
</script>

注意事项 #

• 如果你的代码中存在手动触发输入事件的场景（比如input.dispatchEvent(new Event('input'))），这种情况会被误判为手动输入，需要额外做区分处理。
• 自定义属性或变量尽量避免和原生DOM属性冲突，推荐用dataset或者带下划线前缀的变量（如_isManualInput）。

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