表单默认提交会触发页面刷新或跳转，导致输入框“失活”；正确做法是监听 submit 事件、调用 e.preventDefault() 阻止默认行为，并统一通过表单对象管理元素。
表单默认提交会触发页面刷新或跳转，导致输入框“失活”；正确做法是监听 `submit` 事件、调用 `e.preventdefault()` 阻止默认行为，并统一通过表单对象管理元素。
在 Web 表单开发中，一个常见却易被忽视的问题是：点击提交按钮后，输入框看似“无法再输入”或失去响应能力。这并非元素被禁用（disabled），而是由于 <form></form> 的默认提交行为触发了页面重载（即使未指定 action，浏览器仍会执行 GET 提交并刷新当前页），导致所有 DOM 状态重置、事件监听器丢失、焦点中断——用户误以为“表单元素坏了”。
根本原因在于：你当前使用的是 click 事件监听按钮，但按钮的 type="submit" 会同时触发点击逻辑和表单默认提交。formData.reset() 虽清空了值，却无法阻止页面刷新，因此后续交互完全失效。
✅ 正确解法：改用 submit 事件 + e.preventDefault()
const formData = document.forms.palindrome;
formData.addEventListener("submit", (e) => {
e.preventDefault(); // ✅ 关键：阻止表单默认提交与页面刷新
const input = e.target.text_input; // 利用表单 name 属性直接访问（需确保 input 有 name="text_input"）
const resultSpan = e.target.result_text;
const cleanString = input.value.replace(/\W|_/g, "");
const reverseString = cleanString.split("").reverse().join("");
if (input.value.trim() === "") {
alert("Please input a value.");
input.focus(); // 主动聚焦，提升用户体验
return;
}
if (reverseString.toLowerCase() === cleanString.toLowerCase()) {
resultSpan.textContent = `"${input.value}" is a palindrome`;
} else {
resultSpan.textContent = `"${input.value}" is not a palindrome`;
}
// 重置表单（仅清空值，不刷新页面）
e.target.reset();
});? 同时，请同步更新 HTML 结构以支持上述写法：
<form name="palindrome" id="palindrome">
<div class="input-container">
<input id="text_input" name="text_input" type="text" placeholder="Enter text...">
<button id="check-btn" type="submit">Check</button>
</div>
<div class="results-container">
<!-- 使用 <output> 语义化结果容器，并赋予 name 属性 -->
<span id="result"><output name="result_text"></output></span>
</div>
</form>⚠️ 注意事项：
-
name属性必不可少：e.target.text_input能生效的前提是<input>具有name="text_input"（而非仅id）；同理<output name="result_text"></output>才能被e.target.result_text正确引用。 - 避免混合
id与name引用：全局document.getElementById()在重置后可能因 DOM 重建短暂失效，而e.target.xxx始终指向当前表单内元素，更健壮。 -
reset()方法仅清空控件值、重置为初始状态，不会移除事件监听器或破坏 DOM 结构，前提是页面未刷新。 - 建议添加
input.focus()和placeholder提升可访问性与用户体验。
? 总结：表单交互必须尊重 HTML 表单语义。用 submit 事件代替 click，用 preventDefault() 拦截默认行为，用 name 属性实现表单内元素安全访问——三者结合，即可彻底解决“提交后表单失活”的问题，让 Palindrome Checker 真正稳定可用。
