Question

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

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

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

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

如果我提交表单，而不填写必填字段，那么视口将滚动到顶部，我会看到html5验证泡泡。

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

这jsFiddle显示了我在说什么。

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

Answer 1

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

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

Answer 2

我们可以使用JQuery

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

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

2 个答案: