14四月/110
離奇表單自動提交事件
前言
表單在網頁設計上是很常使用的元素,通常會包含著讓使用者輸入的文字欄位和提交(submit)表單的按鈕。但是不知道為什麼手上的案子的設計,會利用 JavaScript 來取得值再去做 POST 的動作,而又有另一個動作是會做傳統的提交表單動作,可是因為有一個文字輸入欄位是再點選文字後才會出現,且是用來即時修改資料使用,會配合 blur 事件和 Ajax 來修改資料,而有時候使用者會很自然的在編輯完後按下 Enter 來表示修改完成,這時候卻會觸發表單的提交事件,但是卻又不是每一次都會發生,最後終於找到真正的原因...
說明
表單設計上,規劃了一些情境來說明發現的問題:
表單裡面只放置了一個文字欄位,此時在文字欄位按下 Enter 便會送出表單。
1 2 3 |
<form action=""> <input type="text" /> </form> |
表單裡面放置了兩個文字欄位,此時在文字欄位按下 Enter 不會送出表單。
1 2 3 4 |
<form action=""> <input type="text" /> <input type="text" /> </form> |
此時想要按下 Enter 也會送出表單只需要放上一個提交按鈕就好了。
1 2 3 4 5 |
<form action=""> <input type="text" /> <input type="text" /> <input type="submit" /> </form> |
結論
有時候設計上可能會利用 JavaScript 來檢查表單再去做送出表單的動作,可能就會沒有設計提交的按鈕,加上資料又是從資料庫所產生出來,就有機會遇到這樣類似的情形,因為是很簡單的東西,卻是很有可能忽略就會發現怎麼會產生這樣的怪問題,特此記錄一下此次遇到的簡單怪事件。
Leave a comment