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>

但这没有用

Answer 1

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

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

然而，这不会 - 正如刚刚提到的那样 - 提交表格，这不是你想要的，除非你正在提出ajax请求。您可以在页面加载时将焦点设置在输入字段上，这样就可以将焦点“保持”在字段上：

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

在提交/输入后将焦点保持在相同的输入字段

1 个答案: