本文介绍一种优雅的 javascript 方案：表单首次提交后保持用户输入值（便于查看筛选条件），但当用户任一输入框获得焦点并开始输入时，自动清空全部字段，确保重新填写体验干净无干扰。
本文介绍一种优雅的 javascript 方案：表单首次提交后保持用户输入值（便于查看筛选条件），但当用户任一输入框获得焦点并开始输入时，自动清空全部字段，确保重新填写体验干净无干扰。
在构建搜索或筛选表单（如房产过滤器）时，一个常见需求是：提交后仍显示用户刚输入的值（例如 PHP 服务端回显 $_POST 数据），以便用户确认筛选条件；但若用户想“重新筛选”，又不希望手动逐个删除旧值——此时，理想的交互是：只要用户在任一输入框中开始输入新内容，整个表单立即清空，再填入新值。
你当前的 PHP 回显方案（通过 <script> 注入 value）能正确保留提交后的值，但缺乏对“二次编辑”的智能响应。直接监听 focus 并清空会导致用户一点击就丢失刚看到的值，体验不佳；而监听 input 或 keyup 则更精准——仅当用户真正开始输入时才触发清空逻辑。</script>
以下是推荐的纯前端解决方案（兼容现代浏览器，无需修改 PHP 后端逻辑）：
✅ 核心实现逻辑
- 表单提交时，阻止默认跳转（e.preventDefault()），确保页面不刷新；
- 提交成功后，为整个表单绑定一次性的 keyup 监听器；
- 当任意输入框触发 keyup 事件时：
- 暂存当前按键字符（避免清空后丢失首个输入）；
- 清空所有表单字段；
- 将该字符自动填入当前聚焦的输入框；
- 立即移除监听器，避免重复触发。
? 完整可运行代码示例
<form id="filterForm" method="post">
<div style="display:flex; margin-top:20px;">
<input name="surfMin" id="surfMin" type="text"
style="height:35px; width:calc(100%/3);"
placeholder="min surface">
<input name="surfMax" id="surfMax" type="text"
style="height:35px; width:calc(100%/3);"
placeholder="max surface">
<input name="prix" id="prix" type="text"
style="height:35px; width:calc(100%/3);"
placeholder="price">
</div>
<div style="width:100%; margin-top:30px; text-align:center;">
<button type="submit" id="searchBtn"
style="width:25%; height:35px; background:#dc3545; color:white;">
Search
</button>
</div>
</form>
<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 动画（如淡出清空效果）进一步优化视觉反馈。
- 服务端协同：若需彻底重置（如点击“重置”按钮），建议同时添加 并样式化，作为明确的清空入口。
此方案轻量、解耦、用户体验友好，完美平衡了“结果可见性”与“操作便捷性”，适用于各类动态筛选表单场景。
