Question

为mongodb大学网站（https://university.mongodb.com/login）创建自动登录书签的问题，即使输入了数据，该字段也似乎为空，如果我删除/添加一些字母然后返回到原始数据。

检查HTML：

“电子邮件”字段：

输入名称=“ email” class =“ css-1d3375f e15weblb1” id =“ email” required =“” type =“ email” value =“” autocomplete =“ email”
“密码”字段：

输入名称=“密码” class =“ css-1d3375f e15weblb1” id =“密码” required =“” type =“密码” value =“” autocomplete =“当前密码”
“登录”按钮：

button tabindex =“ 0” class =“ css-1lcglra erk7wfm0” type =“ submit”

使用此信息，我可以创建我的个人自动登录书签：

javascript:(function(){
    document.getElementById('email').value='myEmail';
    document.getElementById('password').value='myPassword';
    document.getElementsByTagName('button')[0].click();
})();

该字段已填充，该按钮被激活，但这些字段被指示为空，并且在控制台中收到错误：HTTP400：INVALID REQUEST-服务器无法处理该请求，因为语法无效。（获取）POST-https://university.mongodb.com/login

如果我删除/添加一些字母然后返回到原始数据，该错误消失。例：电子邮件：“ myPersonalEmail”密码：“ myPersonalPassword” //同时更改两个字段... 电子邮件：“ myPersonal”密码：“ myPersonal” //返回初始值（正确的值）… 电子邮件：“ myPersonalEmail”密码：“ myPersonalPassword” //点击按钮，一切正常

Soo我该如何解决？

Answer 1

问题似乎是您更改输入值时未更新应用程序的内部状态。因此，当您单击提交按钮时，数据（电子邮件和密码）不会发送到服务器。您可以在开发人员工具的网络选项卡中进行确认。

为使脚本起作用，您必须在更改其值后在输入上手动触发输入事件。事实是，该页面是使用React库构建的，所有事件实际上都是合成事件。

因此，在这种情况下触发事件比通常要棘手。函数setValue更改输入值并触发事件。最终代码如下：

(function(){
    function setValue(input, value) {
        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;

        nativeInputValueSetter.call(input, value);

        var ev2 = new Event('input', { bubbles: true});
        input.dispatchEvent(ev2);
    }

    setValue(document.getElementById('email'), 'myEmail');
    setValue(document.getElementById('password'), 'myPassword');
    document.getElementsByTagName('button')[0].click();
})();

如何解决：书签中的“此字段必填”错误

1 个答案: