在移动设备上，我们经常可以看到在文本输入框旁边放置一个清晰的按钮，用于快速地清空输入框。而在Web开发中，我们也可以利用CSS和JavaScript来实现类似的功能。
HTML代码
首先，我们需要在HTML中添加一个文本输入框和一个清除按钮，并将它们放置在一起：
---- ------------------------ ------ ----------- ------------ -- ------- --------------------------------- ------
其中，×代表乘号（×），这是清除按钮通常使用的一种符号。
CSS样式
接着，我们需要为输入框和按钮设置一些CSS样式，使它们能够正确地显示在页面中：
---------------- - --------- --------- - -------- - -------------- ----- - ------------ - --------- --------- ---- ---- ------ ---- ---------- ----------------- ------ ----- ------- ----- ------- ----- ----------------- ------------ -
这段CSS代码的作用如下：
position: relative：将父元素设为相对定位，以便子元素能够使用绝对定位。padding-right: 32px：为输入框设置右内边距，以便清除按钮有足够的空间。position: absolute：将清除按钮设为绝对定位，以便它可以放置在输入框旁边。top: 50%和transform: translateY(-50%)：将按钮垂直居中对齐。right: 8px：将按钮放置在输入框右侧，距离输入框8像素的位置。width: 24px和height: 24px：设置按钮的宽度和高度。border: none：去掉按钮的边框。background-color: transparent：将按钮的背景色设为透明。
JavaScript代码
最后，我们需要添加一些JavaScript代码，使清除按钮能够实现清空输入框的功能：
----- ------- - ----------------------------------- ----- ----------- - --------------------------------------- ------------------------------------- -- -- - ------------- - --- ---
这段JavaScript代码的作用如下：
document.getElementById("myInput")：获取ID为myInput的输入框元素。document.getElementById("clearButton")：获取ID为clearButton的清除按钮元素。clearButton.addEventListener("click", ...)：为清除按钮添加一个点击事件监听器。myInput.value = ""：将输入框的值设为空字符串，实现清空输入框的功能。
示例代码
完整的HTML、CSS和JavaScript代码如下所示：
--------- -----
------
------
----- --------------- --
--------------------
-------
---------------- -
--------- ---------
-
-------- -
-------------- -----
-
------------ -
--------- ---------
---- ----
------ ----
---------- -----------------
------ -----
------- -----
------- -----
----------------- ------------
-
--------
-------
------
---- ------------------------
------ ----------- ------------ --
------- ---------------------------------
------
--------
----- ------- - -----------------------------------
----- ----------- - ---------------------------------------
------------------------------------- -- -- -
------------- - ---
---
---------
-------
-------总结
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11156