javascript - 用于自动填写 Angular 创建的用户密码表单的内容脚本

Question

这个问题已经有答案了:

Update Angular model after setting input value with jQuery (12 个回答)

已关闭 6 年前。

我创建了一个内容脚本扩展来自动填充网页上的用户和密码字段。它在正常形式下工作正常，如下所示 -

<input name="userId" class="form-field" id="userId" placeholder="Username" autocomplete="off" tabindex="1" type="text">
<input name="password" class="form-field" id="password" placeholder="Password" autocomplete="off" tabindex="2" type="password">
<input name="signIn" class="btnBlue" id="signIn" value="Sign In" tabindex="4" onclick="checkIECompat()" type="button">

但是，当涉及到 Angular 生成的表单时，无论我如何努力尝试使用那些 ng-xxxxxx 类，它都不起作用。

<input type="text" class="form-control text-center modal-header ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" name="idCard" placeholder="User Name" maxlength="20" autocomplete="off" ng-model="request.userName" required="">
<input type="password" class="form-control text-center ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required" name="password" placeholder="Password" aria-describedby="" autocomplete="off" ng-model="request.password" style="margin-top:15px" required="">
<button type="submit" class="btn btn-blue btn_login" value="Log In" ng-click=" login('/payment')" ng-disabled="loginForm.$invalid" disabled="disabled">เข้าสู่ระบบ <span class="glyphicon glyphicon-log-in" style="font-size:14px" aria-hidden="true"></span></button>

以上是页面首次加载时的代码。当检查了所有有效性并启用了提交按钮后，我手动键入表单并检查代码。然后，我使用我的程序更改这些类和其他详细信息，使它们相同(除了其顺序)。我什至通过删除 disabled 来强制启用按钮属性，但没有帮助。可以单击该按钮，但没有任何反应。

我的问题是“有可能实现这个目标吗？”。 Angular 是否存在任何阻止内容脚本成功运行的限制？或者只是编码问题，我无法使其工作。

还有一个问题是我没有 Angular 代码。它属于我想要使用我的扩展程序的网站。

Answer 1

按照@wOxxOm的指导，添加以下行在设置输入值后触发事件(以更新Angular模型)后，我的问题就解决了。

document.getElementsByName("idCard").item(0).value = 'XXXXX';
document.getElementsByName("idCard").item(0).dispatchEvent(new Event("input"));