如何通过JS/jQuery填充Web应用输入框并激活添加按钮？

问题背景 #

工作中用自制扩展填充Web应用的两个输入框，第一个是带AJAX自动补全的输入框，第二个是带千位分隔符的数字输入框。填充后输入框显示内容，但「Add」按钮未激活；手动点击第一个输入框再失焦才能激活按钮，需要用代码完全模拟用户操作实现自动激活。

核心原因 #

这类带交互的UI组件（自动补全、格式化输入框）依赖用户触发的事件（如input、blur、change）来同步内部状态，直接修改value属性只会改变显示内容，不会触发组件的验证、状态更新逻辑，导致按钮无法激活。

解决方案：模拟完整的用户操作流程 #

通过代码模拟「聚焦输入框→设置内容→触发内容变化事件→失焦」的完整流程，让组件识别到输入已完成并更新状态。

原生JavaScript版本

// 处理第一个自动补全输入框
const materialInput = document.getElementById('autocomplete-sa-material');
// 1. 聚焦输入框，模拟用户点击输入
materialInput.focus();
// 2. 设置输入值（直接操作DOM的value属性，而非setAttribute）
materialInput.value = 'A-10035951';
// 3. 触发input事件，模拟用户打字输入内容，让组件感知变化
materialInput.dispatchEvent(new Event('input', { bubbles: true }));
// 4. 延迟后触发blur事件，模拟用户输入完成后移开焦点，触发组件验证和按钮激活
setTimeout(() => {
  materialInput.blur();
}, 100); // 小延迟确保组件处理完input事件（比如AJAX自动补全请求）

// 第二个数字输入框（已正常工作，可补充事件触发确保状态同步）
const quantityInput = document.getElementById('input-sa-quantity');
quantityInput.value = '27875';
quantityInput.dispatchEvent(new Event('input', { bubbles: true }));

jQuery版本

// 处理第一个自动补全输入框
$('#autocomplete-sa-material')
  .focus() // 聚焦
  .val('A-10035951') // 设置值
  .trigger('input') // 触发内容变化事件
  .delay(100) // 等待组件处理异步逻辑
  .blur(); // 失焦触发验证

// 第二个数字输入框
$('#input-sa-quantity')
  .val('27875')
  .trigger('input');

关键细节说明 #

• input事件：模拟用户实时输入的行为，是大部分UI组件监听内容变化的核心事件，触发后组件会更新内部状态（比如自动补全匹配、格式校验）。
• blur事件：模拟用户输入完成后离开输入框的操作，通常会触发组件的最终验证逻辑，进而激活提交按钮。
• 延迟设置：部分自动补全组件会通过AJAX请求匹配选项，加100ms左右的延迟可以确保组件完成异步操作后再失焦，避免状态更新不彻底。
• 替代事件尝试：如果上述事件无效，可以试试触发change、focusout或键盘事件（如keyup），不同组件的事件监听逻辑可能略有差异。

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