Автофокус на поле при загрузке страницы с использованием js для класса вместо идентификатора ввода

Question

У меня есть сайт, который я хотел бы использовать js, чтобы установить фокус на поле ввода при загрузке страницы. Я не могу изменить следующий код. Вот тег ввода:

input class="form-control ng-pristine ng-valid ng-scope ng-touched"
      ng-model="query.q" type="text"
      placeholder="Enter search terms - use quotes for phrases"
      kw-clearable-input=""

Я пробовал js ниже, глядя на другие похожие темы, но не повезло:

function setFocusToTextBox(){
    document.getElementsByClassName("form-control ng-pristine ng-valid ng-scope ng-touched")[0]; element.focus();
}

Любая помощь будет высоко ценится. Спасибо.

Answer 1

Проблема в том, что элемент не определен в функции фокуса.

Когда определите правильно, это работает.

function setFocusToTextBox()
{ 
  let element = document
    .getElementsByClassName("form-control ng-pristine ng-valid ng-scope ng-touched")[0]; 
  
  element.focus();
}

setFocusToTextBox();

<input class="form-control ng-pristine ng-valid ng-scope ng-touched" ng-model="query.q" type="text" placeholder="Enter search terms - use quotes for phrases" kw-clearable-input=""/>

Вы также можете удалить элемент и присоединить запрос с фокусом, как это:

function setFocusToTextBox()
{ 
  document.getElementsByClassName("form-control ng-pristine ng-valid ng-scope ng-touched")[0].focus();
}

setFocusToTextBox();

<input class="form-control ng-pristine ng-valid ng-scope ng-touched" ng-model="query.q" type="text" placeholder="Enter search terms - use quotes for phrases" kw-clearable-input=""/>

Здесь с предоставленным макетом:

function setFocusToTextBox()
{ 
  document.querySelector( '.input-group.dropdown input' ).focus();
}

setFocusToTextBox();

<div class="input-group dropdown" dropdown="" keyboard-nav="" is-open="opt.showFqDropdown"> <span style="position: relative;"> <input class="form-control ng-pristine ng-valid ng-scope ng-touched" ng-model="query.q" type="text" placeholder="Enter search terms - use quotes for phrases" kw-clearable-input=""/>
</span>
</div>

Answer 2

Вы можете использовать autofocus

<input class="form-control ng-pristine ng-valid ng-scope ng-touched" ng- 
 model="query.q"
 type="text"
 placeholder="Enter search terms - use quotes for phrases"
 kw-clearable-input="" 
 autofocus>