set focus on input field in Vue

Question

I have a form in which I want to set focus on the input field. here is the html of form:

<form method="GET" name="searchFormArticles" novalidate="" data-search-form="articles" data-search-form-articles="" action="/rechtstipps" id="searchFormArticles" data-read-only="1">
  <input type="text" name="what" id="searchArticlesWhat" placeholder="Thema / Autor / Titel" class="form-control anw-form-control border-left-0 anw-md-rounded-right-none anw-md-border-right-0 shadow-none form-control" value="" autocomplete="off">

<button name="searchArticles" type="submit" class="btn btn-block btn-primary mt-3 mt-md-0 shadow-none text-nowrap py-md-0 px-9 anw-md-rounded-left-none">
  <i class="far fa-search d-none d-md-inline-block text-primary" aria-hidden="true"></i>
  <span>Suchen</span>
</button>

input field has a name=what attribute and a id attribute as well, how can I catch this input element in vue

stackoverflow.com/q/64774113/8172857

Boussadjra Brahim
– Boussadjra Brahim

2021-12-03 17:45:56 +00:00
Commented Dec 3, 2021 at 17:45 — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 3, 2021 at 17:45

deamon · Accepted Answer · 2025-07-19 19:47:23Z

5

You can give autofocus property in the first input field.

<input 
    type="text" 
    name="what" 
    id="searchArticlesWhat" 
    placeholder="Thema / Autor / Titel" 
    class="form-control ..." 
    value="" 
    autocomplete="off" 
    autofocus
>

edited Jul 19 at 19:47

deamon

93.1k117 gold badges332 silver badges461 bronze badges

answered Dec 3, 2021 at 17:28

Muhammad Huzaifa

2861 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mali naeem Over a year ago

I cant add that, I have to jump the focus to the input field after a particular event

Muhammad Huzaifa Over a year ago

Then you can try document.getElementById("searchArticlesWhat").focus();

mali naeem Over a year ago

have a look at this chunk of code : formsWhat.forEach(form => { if (form.getAttribute('data-search-form') === currentSearchType) { form.reset(); /-----here I want to set focus to input field-----/ } }); after reseting the form I want to set focus the input field inside the form

Muhammad Huzaifa Over a year ago

After form.reset(); you can get Element by id and set focus on it. using document.getElementById("searchArticlesWhat").focus();

mali naeem Over a year ago

you mean form.elements[0].focus(), Thank you so much Huzaifa bro, it worked like a charm, Shukriya :)

|

Collectives™ on Stack Overflow

set focus on input field in Vue

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related