本文介绍一种优雅的 javascript 方案：表单首次提交后保持用户输入值（便于查看筛选条件），但当用户任一输入框获得焦点并开始输入时，自动清空全部字段，确保重新填写体验干净无干扰。
本文介绍一种优雅的 javascript 方案：表单首次提交后保持用户输入值（便于查看筛选条件），但当用户任一输入框获得焦点并开始输入时，自动清空全部字段，确保重新填写体验干净无干扰。
在构建搜索或筛选表单（如房产过滤器）时，一个常见需求是：提交后仍显示用户刚输入的值（例如 PHP 服务端回显 $_POST 数据），以便用户确认筛选条件；但若用户想“重新筛选”，又不希望手动逐个删除旧值——此时，理想的交互是：只要用户在任一输入框中开始输入新内容，整个表单立即清空，再填入新值。
你当前的 PHP 回显方案（通过 <script> 注入 value）能正确保留提交后的值，但缺乏对“二次编辑”的智能响应。直接监听 focus 并清空会导致用户一点击就丢失刚看到的值，体验不佳；而监听 input 或 keyup 则更精准——仅当用户真正开始输入时才触发清空逻辑。</script>
以下是推荐的纯前端解决方案（兼容现代浏览器，无需修改 PHP 后端逻辑）：
✅ 核心实现逻辑
- 表单提交时，阻止默认跳转（e.preventDefault()），确保页面不刷新；
- 提交成功后，为整个表单绑定一次性的 keyup 监听器；
- 当任意输入框触发 keyup 事件时：
- 暂存当前按键字符（避免清空后丢失首个输入）；
- 清空所有表单字段；
- 将该字符自动填入当前聚焦的输入框；
- 立即移除监听器，避免重复触发。
? 完整可运行代码示例
<script> const form = document.getElementById('filterForm'); const inputs = form.querySelectorAll('input'); form.addEventListener('submit', function(e) { e.preventDefault(); // 提交后，为表单绑定一次性的 keyup 监听器 function handleFirstKeyInput(event) { const target = event.target; const char = target.value[target.value.length - 1] || ''; // 清空所有输入框 inputs.forEach(input => input.value = ''); // 恢复当前输入框的首个字符（提升用户体验） target.value = char; // 移除监听器，确保只触发一次 form.removeEventListener('keyup', handleFirstKeyInput); } form.addEventListener('keyup', handleFirstKeyInput); }); </script>⚠️ 注意事项与最佳实践
- 安全提示：本文方案完全在前端处理，不涉及 PHP 输出脚本拼接，规避了潜在的 XSS 风险（原代码中 print "<script>...".$_POST['xxx']."...</script>" 存在未转义风险，应改用 htmlspecialchars()）。
- 兼容性：Object.fromEntries() 和展开语法在 IE 中不支持，如需兼容旧浏览器，请使用 FormData 的传统遍历方式。
- 增强体验：可结合 placeholder 或 CSS 动画（如淡出清空效果）进一步优化视觉反馈。
- 服务端协同：若需彻底重置（如点击“重置”按钮），建议同时添加 并样式化，作为明确的清空入口。
此方案轻量、解耦、用户体验友好，完美平衡了“结果可见性”与“操作便捷性”，适用于各类动态筛选表单场景。
