javascript - 如何在不滚动的情况下显示 html5 验证消息？

Question

我正在尝试自定义 HTML5 验证的行为。当用户点击提交时，我希望无效字段滚动到页面中间。我的第一次尝试是这样做，但它不起作用:

    $.each($("input, select"), function (index, input) {
        input.addEventListener("invalid", function () {
            this.scrollIntoView({
                block: 'center',
                behavior: 'smooth'
            });
        });
    });

https://jsfiddle.net/gib65/j1ar87yq/

Calling scrollIntoView(...) with block center not working

它不起作用，因为默认的滚动行为，即立即将无效字段滚动到页面顶部(即不平滑)，覆盖了我试图在 scrollIntoView(... ) 选项。

然后我尝试了这个:

    $.each($("input, select"), function (index, input) {
        input.addEventListener("invalid", function (e) {
            e.preventDefault();
            this.scrollIntoView({
                block: 'center',
                behavior: 'smooth'
            });
        });
    });

https://jsfiddle.net/gib65/527u1cm3

添加 preventDefault() 允许我指定的滚动行为发生。但它也可以防止无效字段聚焦和验证消息出现。

所以我的问题是:有没有办法让验证消息在不滚动的情况下弹出？

像这样:

    $.each($("input, select"), function (index, input) {
        input.addEventListener("invalid", function (e) {
            e.preventDefault();
            this.scrollIntoView({
                block: 'center',
                behavior: 'smooth'
            });
            this.focus();
            this.showValidationMessage();
        });
    });

我已经尝试过 reportValidity() 但这会触发整个验证过程，这当然会违背目的(即它会调用覆盖我的自定义滚动的默认滚动)。我也尝试过 checkValidity() 但这会导致“超出最大调用堆栈大小”，可能是因为它触发了“无效”事件，导致监听器再次拾取它并无限期地重复。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

似乎没有任何方法可以仅阻止默认行为的滚动，实际上，即使有，UA 的不同行为也可能使它成为一个不合适的选项:Chrome does hide the tooltip when you scroll远离无效元素，因此它不会显示，Firefox 对此工具提示使用固定位置，因此初始定位将关闭...

所以我能想到的唯一解决方案确实是在平滑滚动完成后手动触发 reportValidity。

不幸的是，没有内置事件会在这种情况发生时触发，所以我们需要想出一个手工解决方案。
我们可以设置一个超时，但这是不可靠的:
对于执行此操作应该花费多长时间没有标准，例如 in Chrome ，该时间是相对于所需的滚动量(即速度大于持续时间)而言的，硬性持续时间限制为 3s (oO)。

如果 reportValidity 的滚动发生在你的平滑滚动完成之前，那么它将以 behavior: "nearest" 模式直接跳转，破坏你的脚本:

const input = document.querySelector('input');
input.oninvalid = (evt) => {
  if( input._forced_invalidity ) {
    input._forced_invalidity = false;
    return;
  }
  evt.preventDefault();
  
  input.scrollIntoView({
    behavior: "smooth",
    block: "center"
  } )
  setTimeout(() => {
    input._forced_invalidity = true;
    input.reportValidity();  
  }, 200 );  // an hard coded value
};

p {
  height: 1000vh;
  width: 5px;
  background: repeat 0 0 / 5px 10px
    linear-gradient(to bottom, black 50%, white 50%);
}

<form id="myform" action="">
  <button>send</button>
  <p></p>
  <input type="text" required>
  <p></p>
  <button>send</button>
</form>

在这里，我将使用我制作的检测器，如果元素的位置发生变化，它将检查每一帧。只要它没有在两帧中发生，它就会解决一个 promise 。这仍然不是 100% 的防弹，但这应该比硬编码超时更好。

另一个复杂的问题是，似乎没有任何信息可以让我们知道触发的事件是由调用 reportValidity 还是由表单的提交操作触发的。
(实际上在 Firefox 中我们可以检查它们的非标准 explicitOriginalTarget 属性，但这仅适用于 FF...)
所以我们需要在调用此 reportValidity 方法之前升起一个标志。那变得很脏，但这是必需的......

const input = document.querySelector('input');
input.oninvalid = (evt) => {
  // that's our flag, see below
  if( input._forced_invalidity ) {
    input._forced_invalidity = false;
    return;
  }
  evt.preventDefault();
  
  smoothScroll( input, {
    block: "center"
  } )
  .then( () => {
    // raise our flag so we know we should not be blocked
    // and we should not fire a new scroll + reportValidity infinitely
    input._forced_invalidity = true;
    input.reportValidity();  
  } );  
};


// Promised based scrollIntoView( { behavior: 'smooth' } )
function smoothScroll( elem, options ) {
  return new Promise( (resolve) => {
    if( !( elem instanceof Element ) ) {
      throw new TypeError( 'Argument 1 must be an Element' );
    }
    let same = 0;
    let lastPos = null;
    const scrollOptions = Object.assign( { behavior: 'smooth' }, options );
    elem.scrollIntoView( scrollOptions ); 
    requestAnimationFrame( check );
    
    function check() {
      const newPos = elem.getBoundingClientRect().top;
      if( newPos === lastPos ) {
        if(same ++ > 2) {
          return resolve();
        }
      }
      else {
        same = 0;
        lastPos = newPos;
      }
      requestAnimationFrame(check);
    }
  });
}

p {
  height: 400vh;
  width: 5px;
  background: repeat 0 0 / 5px 10px
    linear-gradient(to bottom, black 50%, white 50%);
}

<form id="myform" action="">
  <button>send</button>
  <p></p>
  <input type="text" required>
  <p></p>
  <button>send</button>
</form>