3

我有一个表格，需要第一个输入：

<form>
    <input type="text" required>
    <input type="submit">
</form>

用户必须滚动才能到达提交按钮：

input[type="submit"] {
    margin-top: 150%;
}

如果我提交表单，但未填写必填字段，则视口将滚动到顶部，我会看到 html5 验证气泡。

如果我再次向下滚动到提交按钮所在的位置，则验证气泡保持固定不变。我希望它会随着它所附着的字段消失或向上移动。

这个jsFiddle显示了我在说什么。

这里发生了什么？有人见过这个吗？我在最新版本的 Chrome 和 Chromium 上看到了它。它不会发生在 FF 上，因为一旦您与页面交互，气泡就会消失。

4

2 回答 2

3

在 Fx 23.0 中对我来说也是如此，文档滚动，气泡停留。我猜这是因为这些元素不是 HTML 文档的一部分，而只是覆盖，开发人员可能只是没有打扰，忘记了它，或者它是一个错误。

在 Chrome 中这可能是一个错误，因为在 Opera 15.x（基于 Chromium）中它按预期工作，气泡正确地随着文档移动，并且在当前的 Chrome Canary 版本（31.0.1601.1）中它也按预期移动，并且一旦它移出框架，气泡就会消失。

于 2013-08-15T16:49:41.067 回答
0

我们可以使用 JQuery 来处理它

if ($.browser.mozilla) {
    document.querySelector( "form_id" )
    .addEventListener( "invalid", function( event ) {
        event.preventDefault();
    }, true );
 }
于 2018-10-04T15:37:56.623 回答