使用JavaScript填写ProtonMail登录表单点击登录后值消失如何解决

问题原因 #

ProtonMail登录页基于React框架开发，直接通过DOM操作修改输入框的value属性仅会修改DOM的显示值，不会触发框架绑定的输入事件，因此无法同步更新框架内部维护的表单状态。点击登录按钮时，框架会触发表单校验、状态同步逻辑，会将输入框的值重置为框架内部存储的空值，导致之前的赋值消失。

解决方案 #

需要模拟真实用户的输入交互，主动触发对应的输入事件，让框架捕捉到值的变化并同步内部状态，代码示例如下：

// 填充用户名
const usernameInput = document.querySelector('#username');
usernameInput.focus();
usernameInput.value = 'MyUser';
// 派发输入事件通知框架值更新
usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
usernameInput.dispatchEvent(new Event('change', { bubbles: true }));
usernameInput.blur();

// 填充密码
const passwordInput = document.querySelector('#password');
passwordInput.focus();
passwordInput.value = 'MyPassword';
passwordInput.dispatchEvent(new Event('input', { bubbles: true }));
passwordInput.dispatchEvent(new Event('change', { bubbles: true }));
passwordInput.blur();

效果验证 #

运行上述代码后再点击「Sign in」登录按钮，输入框的赋值不会被清空，可以正常提交登录请求。

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