在HTML表单中的两个文本输入之间更改光标位置

我有一个带有2个文本输入字段的简单搜索表单。这是代码

<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>

看起来是这样的,

我的问题是

打开此表单时，光标的位置从第二个输入框开始。我想更改光标插入符号的位置，这样当用户单击此表单时，光标的位置将位于第一个输入框中，而不是第二个输入框中

当HTML表单中有许多inpux文本框时，如何选择光标的起始位置

---

谢谢。

尝试将自动对焦属性添加到输入中，如下所示：

    <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>

---

为您的输入提供一个唯一的ID，并使用

像

要关注onload，请执行以下操作：

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

如果您有同名字段，则可以选择：

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

但为什么有两种形式

  <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>

---

OP没有标记jQuery。@mplungjan同意，如果有人这样做，那么这只是一个选项。此外，您的代码不会集中在加载上，而是在单击任何输入字段时—并且ID不是唯一的

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

  <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>