在 Webkit 浏览器上禁用大写锁定指示器答案

【问题标题】：Disable caps lock indicator on Webkit browsers在 Webkit 浏览器上禁用大写锁定指示器
【发布时间】：2012-10-25 16:32:42
【问题描述】：

如果您使用的是最新版本的 Chrome 或 Webkit 每晚构建版本，您会注意到密码字段有一个不错的新大写锁定指示器，直接嵌入到浏览器本身中。

据我所知，似乎没有任何与此指标相关的样式更改。因此，我没有找到禁用它的方法，因为我们公司使用样式化的 JavaScript 解决方案来实现跨浏览器大写锁定指示器。

有谁知道在 Webkit 浏览器中禁用此指示器的方法？

【问题讨论】：

-webkit-appearance: none 或 textfield 能解决什么问题吗？我没有要测试的浏览器，但这是我的最佳猜测。
这就是我根据quackit.com/css/properties/webkit/css_-webkit-appearance.cfm提出的建议
@apsillers 不。这似乎不是通过任何 webkit 样式属性设置的。
究竟是什么版本，什么操作系统？我刚刚在 Windows 7 上查看了 Chrome Canary (25) 和最新的夜间 Chromium，但无法在密码字段上显示大写锁定指示器。
@josh3736 很有趣。我在 OSX 上，它显示在 Chrome 22、Chrome Canary 23 和昨晚的 Webkit nightly build 中。所以我假设下一个版本的 Safari 也会有这个。

【解决方案1】：

该功能无法从 JavaScript 编写脚本。它在浏览器代码本身内部。浏览器可能有设置，但是网页对它的控制为零。

【讨论】：

是否可以应用特征检测来识别包含大写锁定指示器的浏览器版本，以便禁用 Javascript 的？
好吧，他可以简单地检查他们正在使用的 Webkit 版本是否是带有大写锁定指示器的版本之一，如果是，则禁用 javascript。
@sgroves 这不是特征检测，而是浏览器检测。特征检测的思想就是你说“这个特性会导致问题——这个浏览器支持吗？”你总能得到正确的答案。如果您使用浏览器检测，则需要不断更新检测脚本以覆盖较新的浏览器，这是不可取的
我知道。这是一个潜在的解决方案。
@Diodeus 这与我得出的结论相同，但我希望有人知道方法。人们会认为任何向页面添加内容和/或样式的东西，即使它被嵌入浏览器代码本身，也是可控的。

【解决方案2】：

我认为查看-webkit-appearence: caps-lock-indicator 可以帮助您解决这个问题。

【讨论】：

在这种情况下尝试使用黑客。作为一个快速但不是很优雅的解决方案，尝试使用position: absolute（在流程之外并且不会破坏您的标记）在要隐藏的指示器上方使用不透明的背景绘制 DIV。
不幸的是，这也不好，因为箭头显示在输入本身中。覆盖箭头也会覆盖任何延伸到输入右侧的文本。

【解决方案3】：

在密码文本输入中添加大写锁定指示符实际上是 Mac OS X 的一项功能，而不是 Chrome/Webkit 特有的功能。在 Windows 和 Linux 版本的 Chrome 中，没有大写锁定指示器。

我确实发现在密码字段中添加display: block 会导致指示器在 Chrome 和 Safari 中消失。但是，鉴于display 与大写锁定指示器完全无关，我认为这是一个可能在未来修复的实现细节（边界错误）。

【讨论】：

【解决方案4】：

对于 5 年后的价值，我通过设置解决了它

input::-webkit-caps-lock-indicator {
    content: none;
}

可能不是最干净的解决方案，但可以完成工作；

【讨论】：