產品設計 使用者體驗優化之相容PC與移動端的回車搜尋響應事件設計
阿新 • • 發佈:2019-01-28
【文章特色:本文從使用者體驗的角度出發,分各種情況包括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:如果本文對您有幫助,請點個贊讓我知道哦~