本文介绍如何通过 JavaScript 事件监听实现：点击自定义输入框时自动移除所有预设按钮的 .is-active 激活样式；同时在输入框失焦（blur）时自动清空其值，确保交互逻辑清晰、状态可控。
本文介绍如何通过 javascript 事件监听实现：点击自定义输入框时自动移除所有预设按钮的 `.is-active` 激活样式；同时在输入框失焦（blur）时自动清空其值，确保交互逻辑清晰、状态可控。
在构建带预设选项与自定义输入的表单组件时，常需保证「按钮激活态」与「手动输入态」互斥——即用户一旦聚焦输入框，就应主动退出按钮选择模式。这不仅提升用户体验，也避免状态歧义。
实现该功能需三步核心逻辑：
-
为按钮绑定点击事件：每次点击按钮前，先清除已存在的
.is-active类，再为当前按钮添加该类； -
为输入框绑定
click事件：点击输入框时，遍历所有按钮，移除其.is-active类； -
为输入框绑定
blur事件：当输入框失去焦点时，将其value重置为空字符串。
以下是完整、健壮的实现代码（已优化兼容性与可读性）：
const btnContainer = document.getElementById("rc-button-bar");
const btns = btnContainer.querySelectorAll(".ce-button"); // 推荐用 querySelectorAll 替代 getElementsByClassName（返回静态 NodeList）
const input = document.getElementById("customPercent");
// 按钮点击：切换激活态
btns.forEach(btn => {
btn.addEventListener("click", function() {
// 移除所有按钮的 is-active 类
btns.forEach(b => b.classList.remove("is-active"));
// 为当前按钮添加 is-active 类
this.classList.add("is-active");
});
});
// 输入框点击：取消所有按钮激活态
input.addEventListener("click", function() {
btns.forEach(btn => btn.classList.remove("is-active"));
});
// 输入框失焦：清空输入值
input.addEventListener("blur", function() {
this.value = "";
});
✅ 关键优化说明：
- 使用
forEach替代传统for循环，语义更清晰，避免闭包陷阱； -
querySelectorAll返回静态节点列表，比getElementsByClassName更可靠（后者是实时集合，易受 DOM 变更影响）； - 统一使用
classList.remove()清除状态，无需预先判断是否存在该类，简洁安全； -
blur事件天然适用于“离开输入后重置”场景，比focusout更精准且无冒泡干扰。
⚠️ 注意事项：
- 若后续需支持键盘操作（如 Tab 切换后触发 blur），请确保
input元素具有tabindex="0"或本身可聚焦（默认满足）； - 避免在
blur中执行异步操作（如 API 请求），否则可能因用户快速切换焦点导致状态不一致； - 如需保留用户输入的历史值（例如“编辑后取消”场景），可将
value缓存至data-*属性或外部变量，而非直接清空。
通过以上结构化处理，按钮与输入框的状态管理变得解耦、可预测，也为后续扩展（如联动数值同步、防重复提交等）打下坚实基础。
