使用required属性在HTML5输入字段上设置提示样式

如何解决使用required属性在HTML5输入字段上设置提示样式

| 当使用required属性时，是否可以设置显示在HTML5输入字段上的提示的样式。如果您不确定我在说什么，请在不填写任何内容的情况下单击“提交”。您应该有一个提示弹出窗口。 http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html 我已经检查了CSS来源，但看不到有关提示的任何内容。我发现以重置方式设置div元素的样式会影响其外观。但是我不知道如何具体针对它。请注意：我不是指占位符。干杯，托马斯

解决方法

之所以可以使用div选择器设置错误提示框的样式，是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,\'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; 
});

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

<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>

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

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

对于Mozilla浏览器，还没有办法。如果您要更改文本，Mozilla确实支持x-moz-errormessage：https://developer.mozilla.org/en/HTML/element/input#section_5 ,我找到了一种禁用提示显示的方法。基本上，我发现它们位于div元素中，如果我将其添加到顶部，则在重置时。

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

然后提示不再出现，但我的其他div仍然可以正常工作。我也导致人们相信这些提示出现在HTML文档标签之外。由于使用html div样式也对提示没有影响。有趣的东西。不过，这仅适用于Chrome。 ,如果您指的是说Opera和Chrome使用的提示，那么恐怕您不能这样做。

使用required属性在HTML5输入字段上设置提示样式

如何解决使用required属性在HTML5输入字段上设置提示样式

解决方法

相关推荐