form表單只單個input框按Enter鍵頁面會自動重新整理

zhaozhangxiao發表於2022-03-29
ORM

今天遇到一個問題，在只有單個input框搜尋時按Enter鍵查詢資料時自動會重新整理頁面,框內搜尋的內容沒了，頁面也重新重新整理了，查詢效果不能實現。後來才知道在form表單中，只有一個input框按Enter鍵會重新整理頁面，簡單模擬了一個頁面。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <form>
        <h2>form表單中單個input框按Enter鍵自動重新整理問題</h2>        
        <input type="text" placeholder="搜尋框1"/>
    </form>
    <h2>非form表單按Enter鍵不會重新整理頁面</h2>
    <input type="text" placeholder="搜尋框2"/>
</body>
</html>

透過頁面發現：

  • 頁面中的form表單只有一個input框按Enter鍵頁面會自動重新整理
  • 頁面中沒有form表單只有一個input框按Enter鍵不會重新整理

解決方法：

必須用form表單且只需要一個input框時再新增一個隱藏的input框

<input type="text" style="display:none;" />
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章