JavaScript设置date类型input值后自动恢复问题求助

你遇到的问题本质是页面用了数据驱动的前端框架（比如React、Vue这类），直接通过element.value修改DOM值的操作，不会同步到框架内部的状态数据里。当你点击页面其他元素触发框架重新渲染时，框架会用它自己管理的初始值（也就是HTML里的value="2023-02-07"）覆盖你手动修改的DOM值，导致输入框恢复默认。另外，DOM的value属性和HTML的value特性（attribute）是两个东西：前者是当前显示值，后者是初始值，修改DOM的value不会自动更新HTML里的value特性，这是正常的，但框架只认自己的状态数据，不认DOM的修改。

解决方法分两种，优先选第一种，不行再用第二种：

1. 直接更新框架的状态数据 #

如果知道页面用的框架以及对应的数据状态位置，直接修改框架的状态值。比如React里调用setState更新对应日期变量，Vue里修改绑定的data属性。这种方式是框架推荐的正确做法，能彻底解决问题。

2. 模拟用户输入事件，触发框架状态同步 #

如果不知道框架的状态结构，就模拟用户真实输入的操作，让框架捕获到值的变化并更新内部状态。具体做法是设置value后，触发input或change事件：

// 获取输入框元素
const dateInput = document.querySelector("#root > div.pushable.sidebar-content > div.ui.vertical.ui.overlay.left.visible.sidebar.menu > div:nth-child(2) > div:nth-child(8) > input[type=date]");
// 设置值
dateInput.value = '2023-02-06';
// 触发input事件（多数框架会监听这个事件更新状态）
dateInput.dispatchEvent(new Event('input', { bubbles: true }));
// 如果上面的不行，试试触发change事件
// dateInput.dispatchEvent(new Event('change', { bubbles: true }));

这样操作后，框架会认为是用户手动修改了输入框的值，从而同步更新内部状态，后续点击页面其他元素时就不会再恢复默认值了。

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