背景
在前端开发中，我们经常需要对用户输入进行验证和处理。其中一个常见的需求是为输入框提供清除按钮，使用户可以方便地清除已经输入的内容。在现代浏览器上，这个功能一般可以通过 CSS 和 JavaScript 来实现。但是，在 IE10 上，清除按钮会默认显示在输入框中，并且无法通过 CSS 或 JavaScript 来控制它的显示和隐藏。
解决方案
要解决这个问题，我们需要了解在 IE10 中清除按钮的实现方式。实际上，IE10 在输入框中添加了一个特殊的图标，用于清除已经输入的内容。这个图标的样式由 IE10 自己控制，因此我们无法通过 CSS 或 JavaScript 来修改它的样式或隐藏它。
不过，IE10 允许我们通过监听 beforedeactivate 事件来捕获输入框失去焦点前的状态。在这个事件中，我们可以检查输入框中是否有内容，如果有内容，则说明清除按钮已经显示出来了。此时，我们可以通过 JavaScript 来自定义一个清除按钮，并将其放置在输入框旁边，并根据需要显示或隐藏它。
以下是一个示例代码，演示如何在 IE10 中为输入框添加一个清除按钮：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
-- --------- --
----------------------------- -
-------- -----
-
--------
-------
------
------ ----------- -----------
------- ---------------- --------------- ------------------
--------
--- ----- - ---------------------------------
--- ----------- - ---------------------------------------
--- ------ - -- --------- ---
-- -------- -
------------------------ - ---------- -
-- ------------ --- --- -
-- ------
------------------------- - ---------------
- ---- -
-- ------
------------------------- - -------
-
--
------------------- - ---------- -
-- --------
----------- - ---
-- ------
------------------------- - -------
--
- ---- -
-- --------------------------------
------------------------------- ---------- -
-- ------------ --- --- -
-- ------
------------------------- - ---------------
- ---- -
-- ------
------------------------- - -------
-
---
------------------------------------- ---------- -
-- --------
----------- - ---
-- ------
------------------------- - -------
---
-
---------
-------
-------总结
在 IE10 中，清除按钮会默认显示在输入框中，并且无法通过 CSS 或 JavaScript 来控制它的显示和隐藏。但是，我们可以通过监听 beforedeactivate 事件来捕获输入框失去焦点前的状态，并自定义一个清除按钮来实现相应的功能。这个方法虽然有一定的局限性，但是对于需要支持 IE10 的项目来说，仍然是一个非常有用的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12635