confirm()调用必须包裹删除/清空逻辑，因其仅返回true/false而不自动阻断执行；正确做法是用if判断返回值后再执行清空操作，避免写在confirm()外导致无条件执行。
confirm() 调用必须包裹删除/清空逻辑
原生 confirm() 不会自动阻止后续代码执行——它只返回 true 或 false，你得手动用 if 控制流程。常见错误是把清空操作写在 confirm() 外面，导致用户还没点就已执行。
正确写法是：先调用 confirm()，再根据返回值决定是否执行清空动作。比如清空密码框：
function clearPassword() {
if (confirm('确定要清空密码？')) {
document.getElementById('passwordField').value = '';
}
}
- 不要写成
confirm(...); document.getElementById(...).value = '';—— 这样不管用户点啥都会清空 - 避免在
onclick属性里直接拼长表达式，可读性差且难调试 - 如果清空涉及多个字段，把它们统一放进
if块内，别漏掉某个value或checked
type="reset" 按钮不等于“清空”，而是“还原初始值”
<button type="reset"></button> 只在 <form></form> 内有效，且行为是恢复所有表单控件到页面加载时的 HTML 初始状态，不是设为空字符串。
例如：<input name="pwd" value="123456"> 被 reset 后显示的是 123456，不是空；<input type="checkbox" name="agree" checked> reset 后仍勾选。
立即学习“前端免费学习笔记（深入）”；
- 若想真正“清空”，必须用 JS 手动设
value = ''、checked = false、selectedIndex = -1等 - 动态插入的 input（如 JS append）不会被 reset 识别，除非它们在页面首次加载时就存在于 HTML 中
- reset 按钮失效？先检查是否在
<form></form>外、是否有event.preventDefault()拦截了 reset 事件、或存在同名多控件冲突
移动端和 WebView 中 confirm() 可能被禁用或样式异常
iOS Safari 和部分安卓 WebView 会限制或屏蔽原生 confirm()，表现为点击无响应、弹窗闪退、或按钮文字不可见。这不是代码 bug，而是运行环境策略。
如果你的页面需要兼容这些场景，不能只依赖 confirm()。轻量替代方案是封装一个最小化自定义弹窗：
function showConfirm(message, onConfirm) {
const modal = document.createElement('div');
modal.innerHTML = `
<div class="confirm-modal">
<p>${message}</p>
<button data-action="ok">确定</button>
<button data-action="cancel">取消</button>
</div>
`;
modal.className = 'confirm-overlay';
document.body.appendChild(modal);
modal.querySelector('[data-action="ok"]').onclick = () => {
document.body.removeChild(modal);
onConfirm?.();
};
modal.querySelector('[data-action="cancel"]').onclick = () => {
document.body.removeChild(modal);
};
}
- 自定义弹窗必须挂载到
document.body，否则可能被父容器overflow: hidden截断 - 遮罩层需加
pointer-events: none，弹窗本体加pointer-events: auto，防止背景穿透 - 务必监听
Esc键并preventDefault()，否则按 Esc 会关闭弹窗但不触发任何回调，用户误操作风险高
清空密码框后要主动聚焦或重置光标位置
清空 <input type="password"> 的 value 后，光标默认停留在末尾（即使内容为空），用户再次输入时容易误以为还有残留字符。更糟的是，某些浏览器在清空后不会自动重置输入法状态，导致中文输入异常。
- 清空后立即调用
inputElement.focus()，让焦点回到框内 - 如需彻底清除输入痕迹，可追加
inputElement.setSelectionRange(0, 0)强制光标归位 - 不要依赖
inputElement.select()，它会全选（对空值无效），且在密码框中视觉上不明显 - 如果清空发生在表单提交失败后，建议延迟 10–30ms 再 focus，避开浏览器渲染队列竞争
