js回車(chē)鍵事件

一、總結(jié)

一句話總結(jié)：

$("#focus").keypress(function(event){if(event.which === 13) { /*點(diǎn)擊回車(chē)要執(zhí)行的事件*/ }})

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

1、搜索框回車(chē)鍵事件實(shí)例？

$("#focus").keypress(function(event){if(event.which === 13) { /*點(diǎn)擊回車(chē)要執(zhí)行的事件*/ }})

return false來(lái)阻止后續(xù)的事件（Adminlte默認(rèn)的）

<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>
{{--找課程回車(chē)鍵事件--}}
<script>
    $(function () {
        //$("#focus")為獲取id為focus的元素
        $("#navbar-search-input").keypress(function(event){
            if(event.which === 13) {
                //點(diǎn)擊回車(chē)要執(zhí)行的事件
                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>

二、js 給元素綁定回車(chē)事件

轉(zhuǎn)自或參考：js 給元素綁定回車(chē)事件
https://www.cnblogs.com/xiaoshen666/p/10755875.html">js 給元素綁定回車(chē)事件

經(jīng)常會(huì)看到登錄頁(yè)面輸入完賬戶密碼,回車(chē)就登錄了.實(shí)現(xiàn)方法:

JQuery方法：

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

JS方法：

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

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

移動(dòng)端input呼出的鍵盤(pán)，換行（enter）變?yōu)樗阉?/h3>

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

2. 這時(shí) "換行" 已經(jīng)變成 “前往”，

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

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

移動(dòng)端開(kāi)發(fā)：使用搜索框時(shí)，鍵盤(pán)可以出現(xiàn)"搜索"倆字，并且可以"回車(chē)(Enter)"開(kāi)始搜索......

為了用戶體驗(yàn)更好，在用戶輸入想要檢索的內(nèi)容后，鍵盤(pán)上需要赫然寫(xiě)著“搜索”兩個(gè)字，并且因?yàn)橛面I盤(pán)的習(xí)慣問(wèn)題，當(dāng)按下“回車(chē)(Enter)”時(shí)也必須開(kāi)始搜索，簡(jiǎn)便快捷。user用了都說(shuō)好~~~

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

這里的form必須要，并且onsubmit也必須寫(xiě)，在Enter的時(shí)候才能有反應(yīng)。
另外，在JS中也要綁定search事件才行：

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

以上所有，便可以實(shí)現(xiàn)鍵盤(pán)上出現(xiàn) 搜索 和 回車(chē)(Enter) 有效果。

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

JS移動(dòng)端如何監(jiān)聽(tīng)軟鍵盤(pán)回車(chē)事件

移動(dòng)端經(jīng)常項(xiàng)目中會(huì)有搜索之類(lèi)的功能,一般實(shí)現(xiàn)的是按搜索按鈕進(jìn)行搜索,如果要像PC端一樣實(shí)現(xiàn)按回車(chē)鍵進(jìn)行搜索該怎么實(shí)現(xiàn)呢?

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

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

　　移動(dòng)端軟鍵盤(pán)的回車(chē)會(huì)觸發(fā)form的submit事件,所以我們只需要監(jiān)聽(tīng)form的submit事件就可以實(shí)現(xiàn)按回車(chē)按鈕進(jìn)行搜索的功能

1 2 3 4

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

　　題外話:我拿的ipad進(jìn)行的測(cè)試 當(dāng)input框外面套上form標(biāo)簽 并給form標(biāo)簽添加action屬性后 軟鍵盤(pán)上的return 會(huì)變成藍(lán)色的Search.

三、回車(chē)鍵事件實(shí)例

監(jiān)聽(tīng)回車(chē)事件（搜索框）
<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>
{{--找課程回車(chē)鍵事件--}}
<script>
    $(function () {
        //$("#focus")為獲取id為focus的元素
        $("#navbar-search-input").keypress(function(event){
            if(event.which === 13) {
                //點(diǎn)擊回車(chē)要執(zhí)行的事件
                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>

四、js中回車(chē)觸發(fā)事件

轉(zhuǎn)自或參考：js中回車(chē)觸發(fā)事件
https://www.cnblogs.com/xulz/p/9208615.html

document.onkeydown = function (e) { // 回車(chē)提交表單
// 兼容FF和IE和Opera
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        queryInfo();
    }
}

JS監(jiān)聽(tīng)某個(gè)DIV區(qū)域

$("#queryTable").bind("keydown",function(e){
　　// 兼容FF和IE和Opera
　　var theEvent = e || window.event;
　　var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
　　 if (code == 13) {
　　//回車(chē)執(zhí)行查詢
　　$("#queryButton").click();
　　}
});

JS監(jiān)聽(tīng)某個(gè)輸入框

//回車(chē)事件綁定
$('#search_input').bind('keyup', function(event) {
　　if (event.keyCode == "13") {
　　　　//回車(chē)執(zhí)行查詢
　　　　$('#search_button').click();
　　}
});

總結(jié)

以上是生活随笔為你收集整理的js回车键事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。