一键清空按钮需绑定点击事件将输入框value设为空字符串，并动态显隐：监听input事件，有内容时显示按钮，清空后隐藏并聚焦输入框；可选支持Esc键和aria-label提升可访问性。
给输入框加一个“一键清空”按钮，核心就是监听按钮点击事件，然后把输入框的 value 设为空字符串。实现起来不难，但要注意 DOM 获取、事件绑定和用户体验细节。
HTML 结构：按钮和输入框要关联起来
最直观的方式是把按钮放在输入框旁边，并用 id 或其他属性建立联系。比如：
<input type="text" id="searchInput" placeholder="请输入搜索关键词"><br><button id="clearBtn">✕</button>
按钮不用 type="submit"，避免意外触发表单提交；图标用 ✕ 或 “清空” 文字都行，看设计需求。
JavaScript 绑定点击事件并清空内容
获取元素，绑定点击，清空值——三步到位：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用
document.getElementById或querySelector拿到输入框和按钮 - 给按钮加
click事件监听器 - 在回调里把输入框的
value设为''，并可选地聚焦回输入框
const input = document.getElementById('searchInput');<br>const btn = document.getElementById('clearBtn');<br><br>btn.addEventListener('click', () => {<br> input.value = '';<br> input.focus(); // 清空后自动聚焦，方便继续输入<br>});
增强体验：输入有内容时才显示清空按钮
一直显示清空按钮可能干扰界面。更常见的做法是——只在输入框有值时才让它可见：
- 监听输入框的
input事件，动态控制按钮显隐 - 初始状态按钮设为
display: none - 当
input.value.trim() !== ''时显示按钮，否则隐藏
btn.style.display = 'none'; // 初始隐藏<br><br>input.addEventListener('input', () => {<br> btn.style.display = input.value.trim() ? 'inline-block' : 'none';<br>});<br><br>btn.addEventListener('click', () => {<br> input.value = '';<br> btn.style.display = 'none';<br> input.focus();<br>});
兼容性与可访问性小提醒
这个方案在所有现代浏览器中都可靠。如果要考虑键盘操作（比如用户按 Esc 清空），可以额外监听 keydown 事件：
input.addEventListener('keydown', (e) => {<br> if (e.key === 'Escape') {<br> input.value = '';<br> btn.style.display = 'none';<br> input.focus();<br> }<br>});
另外，给按钮加上 aria-label="清空输入内容"，对屏幕阅读器更友好。
