javascript - 如何解决 javascript 文本框上的按键要求？

Question

您好，感谢您的阅读。

所以我尝试使用 Chrome 自动登录此表单。

https://app.patientaccess.com/login

我使用自己的 Chrome 扩展程序来执行此操作。它基本上只是一个自动填充字段的 JavaScript 文件。我将它用于一系列网站。

例如，这是我用于填写文本框的函数:

function fld(param, val){try{document.querySelectorAll(param)[0].value = val} catch(e){}}

我这样调用它:

fld("input[id='loginForm-email']", "mail@myemail.com")

对于大多数网站来说它都有效。但对于上面的患者访问网站，它没有，我认为原因是因为密码文本框需要物理按键(或监听更改事件或其他内容)。

当我运行我的脚本时，它很好地填充了文本框，但它不允许我单击下一步，因为即使文本框看起来已填充，网页也知道我实际上没有按下任何键。

为了解决这个问题，我必须让我的脚本填写表单，然后单击密码框，按空格键，删除我刚刚输入的空格，然后它让我登录，因为它知道我已经实际按下了在密码框中键入。

所以我的问题是如何让我的自动登录 JavaScript 在此网站上工作？

我认为脚本不能使用按键事件在文本框中输入内容，但这没关系，因为我可以以编程方式填充文本框(使用上面的 fld 函数)。但是我怎样才能让页面相信我已经在密码文本框中输入了内容，以便它可以让我提交表单呢？

正如我所说，我正在使用 JavaScript，如果需要，我可以包含 jQuery。

谢谢。

Answer 1

经过多次尝试和错误，我能够使用 JavaScript 解决这个问题:

var fireOnThis = document.querySelectorAll("[type='text']")[0]
const changeEvent = new Event('input', { bubbles: true, cancelable: true });
fireOnThis.dispatchEvent(changeEvent);

它工作得非常漂亮。我把它变成了一个函数，我所做的就是在自动填充文本字段后运行这个函数(它在填充字段之前不起作用，必须在填充字段之后)。

我在其他网站上尝试了许多其他解决方案，但没有一个有效，但这个有效。哎呀!

我从一个名为 Form Filler 的 Chrome 扩展中得到了这个概念。 。我在试图自动化的表单上尝试了扩展，令我惊讶的是，它毫无问题地填写了表单。所以我看了source code找出它是如何做到的，我发现了这个:

['input', 'click', 'change', 'blur'].forEach(event => {
  const changeEvent = new Event(event, { bubbles: true, cancelable: true });
  element.dispatchEvent(changeEvent);
});

所以我只是将其转换为我答案中的代码，并且效果很好。因此，这确实应该归功于 Form Filler 的开发者 Hussein Shabbir。