解決Enter觸發form表單提交的問題

測試組在測試一個查詢列表的時候,發現點擊enter鍵會界面出現報錯。

我查了一些資料,發現瀏覽器在form表單提交這塊爲我們做了處理。

如果表單裏只有一個type=”text”的input,那麼點擊enter就會觸發提交事件

知道規則問題就好解決了

<html>
    <form>
        <input type='text' name='code'>
    </form>
</html>

講上面這個簡單的代碼複製到一個新建的html文件中,當輸入框獲得焦點,點擊enter就會發現在地址欄的url後面出現

?code=輸入值

這是因爲form表單進行了一次提交。

 

解決問題的方法,網上的資料也提供了好幾種,記錄如下

1,最簡單當然是去除form標籤,這樣就不會有觸發提交問題了

2,額外添加一個不展示的input框

3,添加表單屬性onsubmit="return false"

如果沒有特殊要求一定使用form標籤,那麼第一種方式最適合

不然建議使用第三種方式,這樣可以從根本上解決問題

 

 

知識使我快樂

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章