js回车键事件

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、总结

一句话总结：

$("#focus").keypress(function(event){if(event.which === 13) { /点击回车要执行的事件/ }})

$("#focus")为获取id为focus的元素
$("#focus").keypress(function(event){
if(event.which === 13) {
//点击回车要执行的事件
}
})

1、搜索框回车键事件实例？

$("#focus").keypress(function(event){if(event.which === 13) { /点击回车要执行的事件/ }})

return false来阻止后续的事件（Adminlte默认的）

<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>

二、js 给元素绑定回车事件

转自或参考：js 给元素绑定回车事件
https://www.cnblogs.com/xiaoshen666/p/10755875.html">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必须要，并且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事件就可以实现按回车按钮进行搜索的功能

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>

四、js中回车触发事件

转自或参考：js中回车触发事件
https://www.cnblogs.com/xulz/p/9208615.html

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

JS监听某个DIV区域

$("#queryTable").bind("keydown",function(e){
// 兼容FF和IE和Opera
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
//回车执行查询
$("#queryButton").click();
}
});

JS监听某个输入框

//回车事件绑定
$('#search_input').bind('keyup', function(event) {
if (event.keyCode == "13") {
//回车执行查询
$('#search_button').click();
}
});

正文

js回车键事件