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

Question

我的公司有一个 Microsoft 表单，我每个月要填写大约 10 次，但我输入的实际表单数据并没有太大变化。对于不改变的字段，我希望能够以编程方式填写它，可能使用 javascript。使用“用户 Javascript 和 CSS”chrome 扩展，我已经注入(inject)了 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) 来执行此操作。
转到“元素”选项卡并选择输入。您将看到具有“事件监听器”选项卡的右侧或下方部分。在这里，您必须禁用显示祖先事件监听器的选项。
Event listener of a radio button
正如您在图像上看到的， radio 类型输入具有“更改”事件。
您只需要在填写完输入后发送相应的事件，如下所示:

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

在文本输入的情况下，您需要像这样发送一个“输入”事件:

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