HTML5 提供了一种新的输入类型 search，它可以用于搜索框等输入控件中。当用户在该控件中输入文本时，会显示一个清除按钮以删除当前文本。但是，在某些情况下，我们可能需要知道用户是否单击了清除按钮，从而执行相应的操作。本文将介绍如何检测“搜索”输入的清除，包括使用 JavaScript 和 jQuery 进行检测。
使用 JavaScript 检测
在搜索输入控件中，输入类型为“search”的输入元素实际上是一个带有清除按钮的文本输入框。因此，我们可以使用 JavaScript 监听输入元素的 input 事件，以便在每次文本更改时触发回调函数。然后，我们可以检查输入元素的值是否为空字符串来确定用户是否单击了清除按钮。
以下是示例代码：
-- -------------------- ---- -------
------ ------------- -------------------
--------
----- ----------- - -----------------------------------------
------------------------------------- -- -- -
-- ------------------ --- --- -
------------------ ------ -----------
-
---
---------在上面的代码中，我们首先通过 ID 获取搜索输入元素，并使用 addEventListener 方法添加 input 事件监听器。在事件处理程序中，我们检查输入元素的值是否为空字符串，如果是，则表示用户单击了清除按钮。
使用 jQuery 检测
在 jQuery 中，我们可以使用 on 方法监听输入元素的 input 事件，并使用 val 方法检查输入元素的值是否为空字符串。以下是示例代码：
-- -------------------- ---- -------
------ ------------- -------------------
------- -----------------------------------------------------------
--------
------------------------------- ---------- -
-- -------------- --- --- -
------------------ ------ -----------
-
---
---------在上面的代码中，我们首先通过 ID 获取搜索输入元素，并使用 on 方法添加 input 事件监听器。在事件处理程序中，我们使用 $(this) 获取当前输入元素，并使用 val 方法获取其值。如果值为空字符串，则表示用户单击了清除按钮。
结论
在本文中，我们介绍了如何检测“搜索” HTML5 输入的清除，包括使用 JavaScript 和 jQuery 进行检测。无论您选择哪种方法，都需要监听输入元素的 input 事件，并检查输入元素的值是否为空字符串来确定用户是否单击了清除按钮。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10715
