js回車鍵事件

經常會看到登錄頁面輸入完賬戶密碼,回車就登錄了.實現方法:

JQuery方法：

    $("#focus")為獲取id為focus的元素
    $("#focus").keypress(function(event){
        if(event.which === 13) { 
            //點擊回車要執行的事件
         }
    })

JS方法：

var focus = document.getElementById("focus");
focus.onkeypress=function(event){
    if(event.which === 13) { 
        //點擊回車要執行的事件
    }
}

 =============================================================================================================

移動端input呼出的鍵盤，換行（enter）變為搜索

1.首先，input 要放在 form里面。

2.  這時 "換行" 已經變成  “前往”，

3.如果想變成 “搜索”，input 設置  type="search"

 

=============================================================================================================

移動端開發：使用搜索框時，鍵盤可以出現"搜索"倆字，並且可以"回車(Enter)"開始搜索......

為了用戶體驗更好，在用戶輸入想要檢索的內容后，鍵盤上需要赫然寫着“搜索”兩個字，並且因為用鍵盤的習慣問題，當按下“回車(Enter)”時也必須開始搜索，簡便快捷。user用了都說好~~~

<form action='' onsubmit="return false;"> 
<span class="label">關鍵詞：</span> 
<input type="search" placeholder="輸入您想查詢的關鍵詞" id="myInput" /> </form>

這里的form必須要，並且onsubmit也必須寫，在Enter的時候才能有反應。
另外，在JS中也要綁定search事件才行：

$("#myInput").bind("search", function() {
    //要執行的方法
});

以上所有，便可以實現鍵盤上出現 搜索 和 回車(Enter) 有效果。

=============================================================================================================

JS移動端如何監聽軟鍵盤回車事件

移動端經常項目中會有搜索之類的功能,一般實現的是按搜索按鈕進行搜索,如果要像PC端一樣實現按回車鍵進行搜索該怎么實現呢?

方法很簡單,就是在搜索框的input外面套一個form標簽  注意點:form標簽一定得添加 action屬性(可設置為空)

1	< form action="">< input type="text" name="search" /></ form >

　　移動端軟鍵盤的回車會觸發form的submit事件,所以我們只需要監聽form的submit事件就可以實現按回車按鈕進行搜索的功能

1 2 3 4

var oForm =  document.getElementsByTagName( "form" )[0]; oForm.onsubmit = function (){      $scope.searchOrder(); };

　　題外話:我拿的ipad進行的測試 當input框外面套上form標簽 並給form標簽添加action屬性后  軟鍵盤上的return 會變成藍色的Search.

 

 

 

三、回車鍵事件實例

監聽回車事件（搜索框）
<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
      <input type="text" data-url="{{url('/search_lesson')}}" class="form-control" id="navbar-search-input" placeholder="找課程">
  </div>
</form>
{{--找課程回車鍵事件--}}
<script>
    $(function () {
        //$("#focus")為獲取id為focus的元素
        $("#navbar-search-input").keypress(function(event){
            if(event.which === 13) {
                //點擊回車要執行的事件
                let search_content=$('#navbar-search-input').val();
                let url=$('#navbar-search-input').data('url');
                url=url+'/'+trim(search_content);
                window.location.href=url;
                //console.log(search_content);
                console.log(url);
                return false;
            }
        })
    });
</script>