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

Question

我有一个带有 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>

看起来是这样；

Form Image

我的问题是；

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

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

谢谢。

Answer 1

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

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

Answer 2

为您的输入提供唯一 ID，并使用 JQuery's .focus

将焦点设置为加载

喜欢

<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();
});

Answer 3

关注加载：

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>

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

Changing Position of Cursor Between 2 Text Inputs in HTML Form

html

forms

input

caret