Question

我正在处理表单的javascript验证。我的问题是，在提交表单时，浏览器会自动跳转到空单元格。这不是问题，我喜欢这样。我的问题是，我的页面上显示了一个固定的标题，这个标题覆盖了表单字段。有没有办法绕过它？谢谢！

Answer 1

我遇到了同样的问题并修复了这样的问题：

EventListener绑定：

  $('input').on('invalid',function() {
    scrollToInvalid();
  });

<强>功能：

function scrollToInvalid() {

  //Height of your nav bar with some offset
  var navHeight = $('nav#main').height() + 20;

  // Offset of the first input element minus your nav height
  var firstInvalidPosTop = $('input:invalid').first().offset().top;
  var newScrollPos       = firstInvalidPosTop - navHeight;

  // return true if the invalid element is already within the window view. 
  // If you return false, the validation will stop.
  if (  newScrollPos > (window.pageYOffset + navHeight) && 
        newScrollPos < (window.pageYOffset + window.innerHeight - navHeight)) {
    return true;
  } else {

    // If the first invalid input is not within the current view, scroll to the new position.
    $('html, body').scrollTop(newScrollPos);
  }
};

表单验证自动滚动修改javascript

1 个答案: