鍵盤回車事件導致頁面重新整理的問題

2021-09-30 09:28:08 字數 526 閱讀 1540

原文**:

我最近在做乙個 ajax 查詢的功能,**如下:

在文字框中輸入關鍵字按回車,頁面自動重新整理了,結果肯定是沒有實現無重新整理搜尋了。想了想,可能是按回車後預設提交了表單,於是將form去掉,果然不刷了。但是還是會有很多地方需要用到form。

乙個表單下,如果只有乙個文字框時,按下回車將會觸發表單的提交事件。

既然是只有乙個文字框才會出問題,那麼可以加乙個隱藏的文字框,如下:

現在**成了這樣:

結論是,可以採取兩種方法解決這種問題:1.去掉表單;2.如果非得用表單,只要不讓表單裡有且只有乙個文字框就ok了。

如果以上的方法還不足以讓你去解決問題,那麼你可以用以下方法來阻止因為回車而引起的表單自動提交:

就是在表單 form 後面加上乙個 onsubmit 事件,返回 false,來阻止 form 提交。

鍵盤回車事件導致頁面重新整理的問題

例項分析 我最近在做乙個 ajax 查詢的功能,如下 說明 1.在文字框中輸入關鍵字按回車,頁面自動重新整理了,結果肯定是沒有實現無重新整理搜尋了。想了想,可能是按回車後預設提交了表單,於是將form去掉,果然不刷了。但是還是會有很多地方需要用到form。2.乙個表單下,如果只有乙個文字框時,按下回...

按回車導致頁面重新整理的問題

ajax無動態重新整理頁面的查詢,習慣性按回車,結果頁面重新整理,也做不成無動態 的了,但是點選可以。第乙個方法就是去掉外面的form sss第二個方法是 form的onsubmit return false 方式1 全域性控制回車,13 回車鍵,27 esc,113 f2 document.onk...

react倒計時導致的頁面重新整理問題

記錄一次倒計時導致的頁面重新整理異常問題 背景如下 做了個活動頁面,每晚21點活動開始,需要展示倒計時,需求讓倒計時自動展示,不需要使用者重新整理頁面,那麼問題來了 1 倒計時需要一直定時,在判斷不展示的時候,需要延長倒計時時間,並且隱藏倒計時,展示其他的視覺 2 倒計時展示期間,需要每秒重新整理 ...