提交/输入后保持焦点在同一输入框上

Question

我有一个带有输入框的表单。我想确保在输入/提交表单后，焦点会重新回到同一个输入框：

  <form action="/a/message/new" method="post" id="myform">
    <div class="form-group">
      <div class="input-group">
        <input name="body" id="myField" class="form-control" placeholder="Write message here..." /> <span class="input-group-btn">
                        <button class="btn btn-default" type="submit" value="{{ _(' Post ') }}">Submit</button>
                      </span>
      <input type="hidden" name="next" value="{{ request.path }}"> {% module xsrf_form_html() %}
      </div>
    </div>
  </form>
</div>

我尝试了以下操作：

<script>
  $(function() {

      //Start check on form submit
      $('#myform').submit(function(){    

      $('#myField').focus();

      });

  });    
</script>

但是这并没有起作用。

- CurlyHead

Answer 1

当触发submit事件时，表单将会提交并刷新/更改页面（除非被阻止），您可以使用event.preventDefault();来阻止表单的提交。

$("#myForm").submit(function(event) {
  event.preventDefault();
}); 

然而，正如刚才提到的那样，这不会提交表单，这可能不是您想要的，除非您正在进行ajax请求。您可以在页面加载时将焦点设置在输入字段上，以此方式“保持”对该字段的关注：

$(function() {
  $('#myField').focus();
});    

- Andreas Louv