【文章特色：本文從使用者體驗的角度出發，分各種情況包括PC和移動web端的相容性講解了“回車提交”的處理情況】

一、為什麼要回車提交

在輸入搜尋關鍵字後我們很自然地敲擊回車鍵，或者在手機端點選軟鍵盤的搜尋鍵，而不是再去點選輸入框後面的搜尋按鈕。

使用鍵盤迴車響應事件的好處在於：

1、使用者體驗更加流暢
2、在移動端可以省略搜尋按鈕節約頁面空間

二、回車提交有幾種情況

1、表單回車自動提交

表單是預設回車提交的，前提是滑鼠焦點在輸入框中。

<form method="get" action="https://www.baidu.com/s" target="_blank">
     <input name="wd" type="text" value="hello"/> 
     <input type="submit" value="百度一下">
</form>
 

小知識：

target="_blank" 在表單標籤中也有效，如果輸入關鍵字為hello，則會在新標籤中開啟https://www.baidu.com/s?wd=hello頁面

效果如下，回車後會自動提交開啟百度搜索：

2、按回車鍵或移動web軟鍵盤"前往"、"搜尋"監聽事件

此處不用聚焦，在頁面中監聽到鍵盤"回車"、"前往"、"搜尋"按鍵即可執行js語句。

<input id="input_keyword" type="search" placeholder="請輸入關鍵字..." />
<script>
document.onkeydown = function(e) {
	    var ev = window.event || e;
	    if(ev.keyCode == 13) {        
console.log(document.getElementById("input_keyword").value);
	    }
	}
</script>
 

效果如下：

3、監聽指定的input輸入框

如果頁面中有好幾個搜尋輸入框，我們希望在聚焦的輸入框監聽回車事件怎麼辦呢？那麼可以利用input的onkeypress或onkeydown屬性來進行回車事件監聽響應。

<input id="input_keyword" onkeypress="search()" type="search" placeholder="請輸入關鍵字..." />
<script>
	function search(e){
		var ev = window.event || e;
	    if(ev.keyCode == 13) {
	        console.log(document.getElementById("input_keyword").value);
	    }
	}
</script>
 

三、移動Web隱藏軟鍵盤

在移動web開發中,軟鍵盤輸入完成後點選搜尋，我們希望隱藏軟鍵盤，那麼使頁面失去焦點即可。

程式碼如下：

document.activeElement.blur();

四、禁止表單回車提交

有時候我們需要在使用者提交表單之前進行驗證或者直接ajax請求資料結果，並不想使用者回車跳轉提交表單。那麼可以在表單的onkeypress或onkeydown屬性來監聽回車事件進行驗證，並返回false即可。

程式碼如下：

<form method="get" action="https://www.baidu.com/s" target="_blank" onkeypress="if(event.keyCode==13){return false;}">
       <input name="wd" type="text"  value="hello"/> 
       <input type="submit" value="百度一下">
</form>

 PS：如果本文對您有幫助，請點個贊讓我知道哦~