如何以编程方式填写 Microsoft Office Forms 表单？

Question

我的公司有一个 Microsoft 表单，我每个月必须填写大约 10 次，但我输入的实际表单数据变化不大。对于不改变的字段，我希望能够以编程方式填写它，可能使用 javascript。使用“用户 Javascript 和 CSS”chrome 扩展，我已经注入了 javascript 以在页面上放置一个按钮，我可以单击以填写该按钮，但是当我单击“提交”时，表单不会检测到字段已填充。

以下是示例表单： https://forms.office.com/Pages/ResponsePage.aspx ?id=A2isORETDk26ciZZHMzhJJh3e-CRp49LqjxXVoNyf99UQVZZTkdHS0ZVTkJHSDg5RE1VNkZDWVJPRS4u

这是一些jquery来填充文本框

$('#form-container > div > div > div.office-form-content.office-form-page-padding > div > div.office-form.office-form-theme-shadow > div.office-form-body > div:nth-child(2) > div:nth-child(2) > div.office-form-question-content.office-form-theme-focus-border > div.office-form-question-element > div > div > div > input')[0].value = "hello"

请注意，当您单击“提交”时，该字段将变为空白并收到验证错误。

如何以表单接收数据的方式以编程方式填充这些字段？

Answer 1

您需要检查哪些事件侦听器具有您想要填充的输入。您可以通过访问浏览器开发人员工具 (F12) 来完成此操作。

转到“元素”选项卡并选择输入。您将看到右侧或下方的部分有一个“事件侦听器”选项卡。在这里，您必须禁用显示祖先事件侦听器的选项。

单选按钮的事件监听器

正如您在图像中看到的，单选类型输入有一个“更改”事件。

您只需在填写输入后分派相应的事件，如下所示：

const input = document.getElementsByClassName("Element selector");
const changeEvent = new Event("change"); //Create the event
input.checked = true; //Change input value
input.dispatchEvent(changeEvent); //Dispatch event

在文本输入的情况下，您需要调度一个“input”事件，如下所示：

const input = document.getElementsByClassName("Element selector");
const inputEvent = new Event("input"); //Create the event
input.value = "New value"; //Change input value
input.dispatchEvent(inputEvent); //Dispatch event