'Changing Position of Cursor Between 2 Text Inputs in HTML Form

I have a simple search form with 2 text input fields. Here is the code;

<div id="mini-search-wrapper">
  <form role="search" action="/" method="get">
     <input type="search" id="s" name="s" class="s-input" required/>
     <input type="hidden" name="post_type" value="artist"/>
     <input type="submit" class="s-submit" value="Şarkıcı Ara"/>
  </form>
  <form role="search" action="/" method="get">
      <input type="search" id="s" name="s" class="s-input" required />
      <input type="hidden" name="post_type" value="lyrics" />
      <input type="submit" class="s-submit pos-center" value="Şarkı Ara"/>
  </form>
</div>

It looks like that;

Form Image

My problem is;

Position of the cursor starts from second input box when you open this form. I want to change the cursor (caret) position such that when a user click this form, position of the cursor will be in first input box, not second.

How can I choose starting position of cursor when you have many inpux text boxes in a HTML form?

Thanks.

htmlformsinputcaret


Solution 1:[1]

To focus onload:

window.onload=function() {
  document.getElementById("s").focus(); // remember IDs must be unique
}

Alternative if you have fields of same name:

window.onload=function() {
  document.getElementsByName("s")[0].focus(); // focus first of this name
}

But why two forms?

  <form role="search" action="/" method="get">
     <input type="search" id="s" name="s" class="s-input" required/>
     <input type="hidden" name="post_type" value="artist"/>
     <input type="submit" class="s-submit" value="?ark?c? Ara" 
      onclick="this.form.post_type.value='artist'"/>
     <input type="submit" class="s-submit pos-center" value="?ark? Ara" 
      onclick="this.form.post_type.value='lyrics'"/>
  </form>

Solution 2:[2]

Try to add autofocus attribute to input, like this:

    <div id="mini-search-wrapper">
  <form role="search" action="/" method="get">
     <input type="search" id="s" name="s" class="s-input" required/>
     <input type="hidden" name="post_type" value="artist"/>
     <input type="submit" class="s-submit" value="?ark?c? Ara"/>
  </form>
  <form role="search" action="/" method="get">
      <input type="search" id="s" name="s" class="s-input" required autofocus="true"/>
      <input type="hidden" name="post_type" value="lyrics" />
      <input type="submit" class="s-submit pos-center" value="?ark? Ara"/>
  </form>
</div>

Solution 3:[3]

Give your input an unique ID and set the focus onLoad with JQuery's .focus

Like

<div id="mini-search-wrapper">
    <form role="search" action="/" method="get">
        <input type="search" id="s" name="s" class="s-input" required/>
        <input type="hidden" name="post_type" value="artist"/>
        <input type="submit" class="s-submit" value="?ark?c? Ara"/>
    </form>
    <form role="search" action="/" method="get">
        <input type="search" id="s2" name="s" class="s-input" required autofocus="true"/>
        <input type="hidden" name="post_type" value="lyrics" />
        <input type="submit" class="s-submit pos-center" value="?ark? Ara"/>
    </form>
</div>

JS:

$('input').click(function(){
    $('#s').focus();
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Abd al-Qader al-Awwad
Solution 3

Related Questions