按Enter鍵后Form表單自動提交的問題


  怪事年年有,今年特別多。

  話說,最近項目中遇到一件怪事,當我鼠標focus在文本框中,輕輕敲了下回車鍵,尼瑪頁面突然刷新了,當時把寶寶給嚇得。

  接下來就是一番苦逼的燒腦和蛋疼~

一、被表象所迷惑

  突然出現這種情況,腦海中第一反應是,keydown事件是不是出問題了,然后找啊找啊找啊,然后沒有然后。

  在把input元素上的所有事件移除掉后,我自信的按了一下enter鍵。艾瑪,又刷新了。心里那個苦哎。

二、列出所有可能

  一陣搗鼓之后,腦海中列出了所有按下enter鍵后的改變,url改變,多了一個問號和參數,頁面刷新。心中頓時有個想法,然后確定了一下input元素在form中。這是大致可以得出原因應該是按下enter鍵后,表單提交了。尼瑪,這是什么鬼。

三、水落石出 開心o(* ̄▽ ̄*)ブ

  找到原因后,有不知道為什么。這時候只能搬出度娘了,結果得出當表單中只有一個input輸入元素時,點擊enter鍵,form表單會自動提交

四、結論

  其實知道原因解決起來還是很簡單的,比如多加一個input元素設置display:none,利用事件阻止表單提交等等。下面是列出我的solution

1 <form onsubmit="return false">
2     <input type="text" name="test"/>
3 </form>

  總的來說,適合自己的才是好的,遇到問題要仔細分析,跟着感覺走,不要盲目相信經驗。當一個問題花了比較多的時間,就要反思是否思路不對還是方法有誤,要跳出固定思維,抽絲撥繭地去分析所有可能的原因。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM