14

使用 required 属性时，是否可以设置 HTML5 输入字段上显示的提示样式。如果您不确定我在说什么，请单击此表单上的提交而不填写任何内容。您应该有一个提示弹出窗口。

http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

我检查了 CSS 源代码，但没有看到任何有关提示的信息。

我发现以重置方式设置 div 元素的样式会影响它的显示方式。但我不知道如何专门针对它。

请注意：我不是指占位符。

干杯，托马斯。

4

4 回答 4

13

之所以可以使用 div-selector 设置错误气泡样式，是因为 Chrome 11/12 中的一个错误，应该在较新的版本中修复。在 Chrome 12 中有一些伪类来设置错误气泡的样式（也许在 Safari6 中）（::-webkit-validation-bubble 等）。您可以在以下文档中找到完整的 HTML 结构，包括伪元素选择器和一些样式示例。

请注意，这是对 HTML5 表单约束验证和非标准的 webkit 扩展。如果您想在所有支持 HTML5 验证的浏览器中使用一种方式来设置错误消息的样式，则必须使用 JavaScript。

这样做的关键原则是，您必须向无效事件添加处理程序（注意：无效事件不会冒泡），然后阻止默认交互。这将删除浏览器的原生错误气泡，您可以在所有 HTML5 浏览器中实现自定义样式的 UI。

//Note: that we use true for useCapture, because invalid does not bubble
document.addEventListener('invalid', function(e){
    //prevent the browser from showing his error bubble
    e.preventDefault();
    //now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
    showError(e.target, $.prop(e.target, 'validationMessage');
}, true);

上面的代码将为当前表单中的所有无效元素调用 showError。如果您只想对第一个无效元素执行此操作，您可以执行以下操作：

document.addEventListener('invalid', (function(){
    var isFirst = true;
    return function(e){
        //prevent the browser from showing his error bubble
        e.preventDefault();
        //now you can implement your own validation UI
        if(isFirst){
            showError(e.target, $.prop(e.target, 'validationMessage');
            //set isFirst to false
            isFirst = false;
            //reset isFirst to true, so user can try to submit invalid forms multiple times
            setTimeout(function(){
                isFirst = true;
            }, 9);
        }
    };
})(), true);

如果您在网站上使用 jQuery，我建议您使用webshims lib。webshims lib 在所有浏览器（包括 IE6）中实现了 HTML5 约束验证，并提供了一个简单的扩展来生成简单的自定义样式验证消息。JS 代码如下所示：

$(document).bind('firstinvalid', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

生成的 HTML 结构$.webshims.validityAlert.showFor如下所示：

<span class="validity-alert" role="alert"> 
    <span class="va-arrow"><span class="va-arrow-box"></span></span> 
    <span class="va-box">Error message of the current field</span> 
</span>
于 2011-07-13T11:13:40.467 回答
5

您可以使用以下伪选择器在 webkit 中设置验证气泡的样式：

::-webkit-validation-bubble
::-webkit-validation-bubble-top-outer-arrow
::-webkit-validation-bubble-top-inner-arrow
::-webkit-validation-bubble-message

对于 Mozilla 浏览器，目前还没有办法。x-moz-errormessage如果您想更改文本，Mozilla 确实支持： https ://developer.mozilla.org/en/HTML/element/input#section_5

于 2011-07-18T11:43:16.493 回答
2

我找到了一种禁止显示提示的方法。

基本上我发现它们在一个 div 元素中，如果我将它添加到顶部，则在我的重置中。

div { display: none; }
body div { display: block; }

然后提示不再出现，但我的其他 div 工作正常。

我也被引导相信提示出现在 HTML 文档标签之外。由于 html div 的样式也对提示没有影响。有趣的东西。

不过，这只适用于 Chrome。

于 2011-04-14T08:28:39.063 回答
0

如果您指的是 Opera 和 Chrome 使用的提示，那么恐怕您不能。

于 2011-04-14T08:01:09.050 回答