如何在不使用jQuery的情况下用JavaScript触发输入框的输入事件？

嘿，这个问题我太熟悉了！当你直接通过value属性设置输入框内容时，浏览器并不会自动触发input（也就是你说的“输入事件”）——毕竟这是代码修改，不是用户手动输入的动作。不过我们可以手动创建并派发事件来模拟这个行为，下面给你两种实用的方法：

方法一：现代浏览器推荐方案（使用Event构造函数） #

这是目前最标准、最简洁的写法，支持绝大多数现代浏览器：

// 获取输入框元素
const searchInput = document.getElementById("location-search");
// 设置输入框值
searchInput.value = "Somewhere";
// 创建input事件，配置事件能冒泡、可取消（和原生行为一致）
const inputEvent = new Event('input', {
    bubbles: true,
    cancelable: true
});
// 给输入框派发这个事件
searchInput.dispatchEvent(inputEvent);

这里的bubbles: true很关键——很多页面的事件监听可能绑定在输入框的父元素上，开启冒泡能确保这些监听也能捕获到事件。

方法二：兼容旧浏览器的备选方案 #

如果你需要兼容IE这类老旧浏览器，可以用传统的createEvent API：

const searchInput = document.getElementById("location-search");
searchInput.value = "Somewhere";
// 创建事件对象
const inputEvent = document.createEvent('Event');
// 初始化事件：事件名、是否冒泡、是否可取消
inputEvent.initEvent('input', true, true);
// 派发事件
searchInput.dispatchEvent(inputEvent);

额外补充：触发change事件 #

如果你的场景需要触发change事件（比如输入框失去焦点时才会触发的那种），方法完全类似，只需要把事件名换成change就行：

const changeEvent = new Event('change', { bubbles: true, cancelable: true });
searchInput.dispatchEvent(changeEvent);

不过要注意，原生change事件是在输入框值改变且失去焦点时触发的，手动派发时不需要额外模拟失焦动作，直接派发事件即可。

一般来说，触发input事件就足够模拟用户输入的完整行为了，因为用户每输入一个字符，浏览器都会自动触发input事件。

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