js頁面當中沒有寫回車事件,但是有回車效果

—阿峰—發表於2024-03-04

前兩天遇到一個問題,研究了我很差事件。問題如下:

頁面只有一個文字框,沒有寫任何回車事件,但是點回車的時候,就會觸發回車,回傳頁面。

於是各種google,終於有了結果:

  1. 如果表單裡有一個type=”submit”的按鈕,Enter鍵生效。
  2. 如果 表單裡只有一個type=”text”的input,不管按鈕是什麼type,Enter鍵生效。
  3. 如果按鈕不是用input,而是用button,並且沒有加type,IE下預設為type=button,FX預設為 type=submit。
  4. 其他表單元素如textarea、select不影 響,radio checkbox不影響觸發規則,但本身在FX下會響應Enter鍵,在IE下不響應。
  5. type=”image”的input,效果等同於type=”submit”,不知道為什麼會設計這樣一種type,不推薦使用,應該用 CSS新增背景圖合適些。

這五點是引用別人的原話,說的很明瞭。

我的問題就是上方第二點,跟JS沒有一丁點關係,但是瀏覽器預設有一個規則,當你的頁面只有一個type="text"的情況下,他會預設當有一個sumbit的事件,如果出現兩個type="text"的時候,就不會生效了

所以,一下次,如果你的頁面也只有一個“text”(一般是搜尋頁面),如果也想寫回車事件的話,就要注意了。

其實像這種問題,解決辦法很變態,我是在頁面裡面放一個隱藏的“text”。

我是使用的頁面隱藏一個type="text"的input標籤。

第二種解決方法就是js阻止頁面的回車事件

相關文章