Chrome 不显示由 jQuery 或直接 CSS 属性设置的类答案

【问题标题】：Chrome not displaying Class set by jQuery or a Direct CSS propertyChrome 不显示由 jQuery 或直接 CSS 属性设置的类
【发布时间】：2011-02-19 18:26:58
【问题描述】：

这似乎是一个设计/css 问题，但我确实需要一些帮助。

这是http://library.permilia.com/Gavin/version2.0_beta/lead.html的页面

它适用于除 chrome 之外的所有可以想象的浏览器。

它的工作我的意思是它应用了一个类 .error 将边框设置为 1px 实心 #f00 这是一个红色边框。由于某种原因，在 chrome 中您无论如何都无法更改它！

有人有什么想法吗？

【问题讨论】：

标签： jquery css html google-chrome

【解决方案1】：

您的 CSS 文件未设置“背景色”。它正在设置“*背景颜色”。如果 IE hack，这可能是某种形式，但您需要设置“真实”样式属性（“背景颜色”，没有星号）。

【讨论】：

从 chrome 的 javascript 控制台执行 $('input[type=text]').addClass('error') 为输入正确着色。
不，遗憾的是后来添加了它以支持 IE7 的特殊选择。正如我所说，没有提供边框颜色。

【解决方案2】：

所以...，答案是您的任何 JS 代码都不会触发，因为 Chrome 正在实现 HTML5 输入元素，包括表单验证。因此，除非您正确填写字段，否则您的验证代码将永远不会触发！

在 HTML5 中，required 属性是一个布尔值，它要么是真要么是假。根据the spec，浏览器应该在问题字段上触发invalid 事件。如果需要，您可以在此时取消默认阻止行为。但是，您的脚本在您尝试attr('required') 时再次崩溃。它将使用 HTML5 在 Chrome 中返回 true 或 false，而不是您期望的 email 之类的值。

所以如果你想让它工作，你需要添加这两个部分：

$(":input").bind("invalid", function(e){
   e.preventDefault(); // Don't block the form submit
});

然后从

重构您的代码

var a = $(this).attr('required');

成为

var a = $(this).attr('required') ? $(this).attr('type') : "";

并根据需要更改您的 switch 语句以匹配

最后一个想法：您也可以采用一种非常酷的方法（也称为特征检测），然后改为：

用这个包裹你当前的validate:函数内部：

if(typeof $('<input />')[0].checkValidity === "undefined") {
  ... existing code ..
} else {
  $(':input').bind('invalid', function(){
     $(this).addClass('error');
  }).blur(function(){
     // If valid, turn off error
     // If invalid, turn on error
     $(this).toggleClass('error', !this.checkValidity());
  });
}

Here is a demo 表示将在 Chrome 中运行的第二个版本，并且可能是 Opera 的当前/测试版。

【讨论】：

Doug 很荣幸收到您的回复！非常感谢您的回复，它非常有用和彻底！