如何以编程方式单击按钮 - 也许是 Angular？

Question

我正在尝试以编程方式单击 html 按钮。

查看页面源代码 - 我明白了

<div class="submitBtns">
    <button class="btn btn-primary primaryBtn" type="button">Search</button>
</div>

我不认为这是标准的 html - 也许是一个扩展。

我可以到达按钮对象 - 但调用obj.click()它不起作用。

该文档也有这个标题 - 也许可以识别文档类型 - 还有很多以ng-前缀开头的类名。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

更多信息...这是一个第三方网页，我正在向其中注入 javascript。

我在输入字段中输入了一些内容，然后想模拟按下按钮。

纯 JavaScript。

Answer 1

在 Stackblitz 中创建了一个示例演示以供参考

@ViewChild在 Angular 中，我们可以使用&访问任何 HTML 元素ElementRef。我们还必须通过在#要以编程方式访问的 HTML 元素中添加前缀来添加唯一标识符。

在 HTML 中：

<button class="btn btn-primary primaryBtn" #search type="button">Search</button>

在 TS 中：

import { Component, ViewChild, ElementRef } from '@angular/core';
.
.
export class YourComponent{
.
.
    @ViewChild('search') search: ElementRef;
.
.
.
.   // In your function
    this.subContent.nativeElement.click();
}

Answer 2

JavaScript 选项

如果您想使用纯 JavaScript 来执行此操作，您可以向按钮添加一个 ID 并执行以下操作：

document.getElementById("myButton").click();

jQuery 选项

如果我用 jQuery 来做到这一点，我会编写这段代码：

<script>
$(document).ready(function() {
   $('.submitBtns button').click();
});
</script>

现在的问题是，如果页面上有多个表单，它将单击使用选择器标识的所有按钮$('.submitBtns button').click();。如果您有权访问代码，则可以向此按钮添加 ID。只需将其更改为：

<script>
$(document).ready(function() {
   $('#myButton').click();
});
</script>

If you require to simulate a click to trigger events related to the click, but not actually click the button, you could use $("#myButton").trigger("click");.