Webkit Validation Bubble 的行为就像它在 Chrome 上的固定位置一样答案

【问题标题】：Webkit Validation Bubble behaves like it has fixed position on ChromeWebkit Validation Bubble 的行为就像它在 Chrome 上的固定位置一样
【发布时间】：2013-08-15 15:37:32
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

标签： html forms validation

【解决方案1】：

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

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

【讨论】：

谢谢，我可以忍受，我只会让我的表格更小:)

【解决方案2】：

我们可以使用 JQuery 来实现它

if ($.browser.mozilla) {
    document.querySelector( "form_id" )
    .addEventListener( "invalid", function( event ) {
        event.preventDefault();
    }, true );
 }

【讨论】：

你实际上并没有使用 jQuery，除了浏览器识别。