javascript - 使用 Tab 键进行页面导航时滚动到表单元素上的错误消息

Question

我有一个包含多个输入元素的表单。某些输入元素在输入下方有错误消息。

当我使用 Tab 键进行页面导航时，网站会滚动到焦点输入元素。当焦点输入元素有错误消息时，我看不到输入元素下方的消息，因为页面只滚动到焦点输入。我需要将页面向下滚动一点，以便用户可以看到错误消息。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
   <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
   <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control">
    </div>
    <div class="col">
      <input type="text" class="form-control">
    </div>
  </div>
   <div class="row">
    <div class="col">
      <input type="text" class="form-control is-invalid">
       <div class="invalid-feedback">
          Error Text.
        </div>
    </div>
    <div class="col">
      <input type="text" class="form-control is-invalid">
       <div class="invalid-feedback">
          Error Text.
        </div>
    </div>
  </div>
</form>

使用 Tab 键浏览表单输入。当您将错误消息集中在最后的输入上时，您将看不到输入字段下方的错误文本。

Answer 1

假设你已经安装了 jquery(不是 slim，因为在 slim 版本中没有定义 animate)，你只需要修改高度偏移量(line_height)，因为你需要滚动到比焦点元素更远的地方。

$("input").focus(function() {
    var error_input = $(this);
    if(error_input.hasClass("is-invalid")){
      var line_height = $(".invalid-feedback").height();

      //FIXME
      console.log(error_input.offset().top + line_height);

      $('html, body').animate({
        scrollTop: error_input.offset().top + line_height
      }, 600);   
    }
});

这是:fiddle