Как программно нажать на кнопку - может быть 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 для справки

В Angular мы можем получить доступ к любым HTML элементам, используя @ViewChild & ElementRef. Мы также должны добавить уникальный идентификатор, добавив префикс # в элемент HTML, к которому вы хотите получить программный доступ.

In HTML:

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

In 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, с которым вы знакомы, - это то, что вы прочитали из источника расширения браузера. Есть несколько фундаментальных шагов, о которых вы забыли упомянуть. Более того, упомянутые вами возможности были, по меньшей мере, разбросаны:

Я не думаю, что это стандарт html ...

Это очень стандартный и действительный, безупречный HTML.

Я могу добраться до объекта кнопки - но вызов obj.click () для него не работает ...

Не очень понятно, как obj было получено из obj.click().

Существуют и другие разбросанные фрагменты информации ... ng-* классы Angular - вы правы. <meta> не имеет отношения к данной проблеме.

Подробнее ... это сторонняя веб-страница, и я добавляю JavaScript в нее. Я ввел что-то в поле INPUT и затем хотел бы смоделировать нажатие кнопки.

Обычно это невозможно, если у вас нет прав на редактирование указанного стороннего сайта. Я верю, что расширения браузера могут сделать это, но на самом деле это не редактирует сам сайт, это то, что браузер отображает только для пользователя.

---

Демо

Примечание: детали комментируются в демоверсии - также я загрузил Bootstrap 4, потому что мне было скучно. Bootstrap конечно не требуется и является необязательным.

// Reference the button
const btn = document.querySelector('.searchButton');

/*
- Register the click event to button
- When clicked the handler function flipStatus() is called
*/
btn.onclick = flipStatus;

/*
- Event handler function passes the event object
- event.target always references the elements that the user
  clicked.
- .classList.toggle('active') will add class .active if the
  button doesn't have it and remove class .active if the
  button has the class .active
*/
function flipStatus(event) {
  event.target.classList.toggle('active');
}

/*
- Programatically click the button -- if successful, the 
  button text should be: "Searching..."
- If clicked by user afterwards the button text should be:  
  "Search"
*/
btn.click();

.input-group.input-group {
  width: 85vw;
  margin: 15px auto;
}

.active.active::after {
  content: 'ing...';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet" crossorigin="anonymous">

<section class="input-group input-group-lg">
  <input class="searchTerms form-control" type="search" placeholder="Enter search terms...">
  <section class="input-group-append">
    <button class="searchButton btn btn-lg btn-primary" type="submit">Search</button>
  </section>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 3

JavaScript Опция

Если вы хотите сделать это с чистым JavaScript, вы можете добавить идентификатор кнопки и сделать это:

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

jQuery Опция

Если бы я делал это с jQuery, я написал бы этот фрагмент кода:

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

Теперь проблема в этом что если у вас есть несколько форм на вашей странице, он будет нажимать на все кнопки, которые определены с помощью селектора $('.submitBtns button').click();. Возможно, вы могли бы добавить идентификатор к этой кнопке, если у вас есть доступ к коду. И просто измените его на:

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

Если вам требуется смоделировать щелчок, чтобы инициировать события, связанные с щелчком, но не нажимать кнопку, вы можете использовать $("#myButton").trigger("click");.