删除某些输入上 IE10 的“清除字段”X 按钮？

Posted 2023-03-04

【中文标题】删除某些输入上 IE10 的“清除字段”X 按钮？

【英文标题】：Remove IE10's "clear field" X button on certain inputs?

【发布时间】：2012-12-10 01:37:28

【问题描述】：

可以肯定，这是一个有用的功能，但有什么方法可以禁用它吗？ 例如，如果表单是单个文本字段并且旁边已经有一个“清除”按钮，那么再有 X 也是多余的。在这种情况下，最好将其删除。

可以做到吗，如果可以，怎么做？

【问题讨论】：

这对于具有默认值且空白没有意义的字段也很有用，例如数量。

因为这不会触发输入输入，所以在绑定 javascript 事件时这是非常棘手的。

【参考方案1】：

为框设置::-ms-clear pseudo-element 样式：

.someinput::-ms-clear 
    display: none;

【讨论】：

如果你在IE10之前使用IE兼容模式来渲染你的页面，这个伪元素不起作用，它仍然显示按钮。

@Yousef：是的，这就是它的工作原理，也是您永远不应该在实际网站中使用兼容模式的部分原因。它实际上不兼容:)

@minitech - Windows 7 机器上的 IE9

此控件仅出现在 Win8 的 IE10+ 中。诀窍是当文档处于兼容模式时它仍然会出现。

@EricLaw：嗯，不仅在 Win8 上。我现在使用的是 Windows 7，我可以在我的 IE10 中看到那些 X 按钮。所以你可能会说它是 IE10+ 独有的功能（虽然不确定 IE9），但绝对不是 Win8 独有的，因为它出现在 IE10 的 Win7 版本中。无论如何，谢谢你的提示，@minitech！

【参考方案2】：

我发现最好将width 和height 设置为0px。否则，IE10 会忽略字段上定义的填充 - padding-right - 这是为了防止文本输入覆盖在输入字段上的“X”图标上。我猜 IE10 在内部将输入的padding-right 应用到::--ms-clear 伪元素，隐藏伪元素不会将padding-right 值恢复为input。

这对我来说效果更好：

.someinput::-ms-clear 
  width : 0;
  height: 0;

【讨论】：

这里有一个 jsFiddle 来说明这个解决方法：jsfiddle.net/zoldello/S5YRj

添加display: none

【参考方案3】：

我会将此规则应用于所有文本类型的输入字段，因此以后不需要重复：

input[type=text]::-ms-clear  display: none; 

一个人甚至可以通过使用变得不那么具体：

::-ms-clear  display: none; 

我甚至在添加此答案之前就使用了后者，但认为大多数人更愿意比这更具体。两种解决方案都可以正常工作。

【参考方案4】：

您应该为::-ms-clear (http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx) 设置样式：

::-ms-clear 
   display: none;

您还可以为密码字段设置::-ms-reveal 伪元素的样式：

::-ms-reveal 
   display: none;

【讨论】：

注意——在删除::-ms-reveal 元素之前，请考虑是否可以使其正常工作！ （或者，如果您为每个人提供此按钮，就像最初的提问者一样。）有些人确实使用它。

@minitech - 听起来很棒。你能告诉我们如何使它与输入事件的 Javascript 绑定一起工作吗？它不会引发事件，因此几乎无法使用。

【参考方案5】：

我认为值得注意的是，当页面以兼容模式运行时，所有基于样式和 CSS 的解决方案都不起作用。兼容模式渲染器会忽略 ::-ms-clear 元素，即使浏览器显示 x。

如果您的页面需要在兼容模式下运行，您可能会被 X 显示卡住。

就我而言，我正在使用一些第三方数据绑定控件，我们的解决方案是处理“onchange”事件并在使用 x 按钮清除字段时清除后备存储。

【参考方案6】：

在“时间”输入中隐藏箭头和交叉：

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button
    -webkit-appearance: none;
    margin: 0;

【讨论】：

正是我需要的 JxBrowser 和输入类型时间。干杯！