通過Enter鍵送出form表單時需要注意的問題

現在很多網站的登陸頁面，在輸入完賬号密碼後，點選Enter鍵直接登陸的操作，就是這麼一個平凡的操作，不知道大家有沒有在實際工作中發現一些問題，下面我來跟大家講講我發現的問題，首先運作下面的代碼：

<form method="get">
	<label>
		使用者名:<input type="text" />
	</label>
	<button onclick="console.log('取消') ;return false;">取消</button>
	<button onclick="console.log('送出') ;return false;">送出</button>
</form>
           

當你在輸入框中點選回車時，你會驚奇的發現控制台竟然列印出了

取消

，别慌，我們把取消按鈕隐藏掉

display:none

:

再次重新整理界面，輸入框中回車，你又會發現控制台依然列印出了

取消

， 是不是覺得很神奇，然後我們把 送出按鈕 和 取消按鈕 調換一個位置：

<button onclick="console.log('送出') ;return false;">送出</button>
<button onclick="console.log('取消') ;return false;">取消</button>
           

這時候控制台列印出了

送出

，到這裡相信大家應該明白了一個事情，如果 在

from

中進行回車操作，表單在執行

submit

的操作同時，會響應後面第一個

button

的點選事件 無論這個button是否是隐藏的都會被執行click事件，是以大家在通過Enter鍵處理表單送出的時候，注意其中

button

的前後順序。

當然了，有時候我們可能就需要取消按鈕在前，送出按鈕在後，這又該如何呢，别急，看下面代碼:

<input type="button" onclick="console.log('取消') ;return false;" value="取消"/>
<input type="submit" onclick="console.log('送出') ;return false;" value="送出">
           

我們将

button

換成

input

然後分别設定不同的

type

，這時候點選回車，你會發現控制台列印了

送出

，看到不同了吧，使用

input

标簽來定義按鈕的時候，點選回車，會執行

type="submit"

的按鈕，這樣就不用去關心按鈕的前後位置了。當然了你也可以手動執行

form

的

submit

方法，這個看個人喜歡。

謝謝！