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

四、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回车键事件的更多相关文章

  1. js 回车键事件

    document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arg ...

  2. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  3. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  4. 在页面使用js回车键

    网上有大量的文章关于 js回车事件的,但是只有适合自己的才是最好的. 第一种: // submit closest form $(".keydown_submit").keydow ...

  5. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  6. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  7. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  8. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

随机推荐

  1. Vue指令之`v-bind`的三种用法及v-on事件指令

    v-bind:是 Vue中,提供的用于绑定属性的指令 1. 直接使用指令`v-bind` 2. 使用简化指令`:` 3. 在绑定的时候,拼接绑定内容:`:title="btnTitle + ...

  2. JAVA中为什么要使用接口,继承接口不是还要重写方法吗?为什么不直接写那些方法呢?:::接口的最主要的作用是达到统一访问

    接口的最主要的作用是达到统一访问 那么什么叫统一访问呢 举个例子 你这样想,我做一个USB接口,有个读的抽象方法 那叫read()吧,然后mp3类实现,U盘类实现,移动硬盘类实现,这样我用的时候用US ...

  3. docker 部署oracle

    Oracle数据库服务器Docker映像文档 Oracle Database Server 12c R2是行业领先的关系数据库服务器.Oracle数据库服务器Docker映像包含在Oracle Lin ...

  4. javascript_03-数据类型

    数据类型 JavaScript 和 Java 一样,也是有基本数据类型的.但也是有区别的. JavaScript中的数据类型 简单(基本.值)数据类型 number string boolean un ...

  5. Win10开启蓝屏信息记录及文件查看位置的方法

    蓝屏,是电脑最常见的故障,一般出现蓝屏时都会显示详细的蓝屏错误信息,方便用户排查故障.但是如果系统未开启蓝屏记录,下文介绍蓝屏日志开启及蓝屏日志文件存放位置.我用的是win10系统 蓝屏日志开启方法步 ...

  6. Android NDK 同时编译多个模块

    |-test |---Android.mk |---Application.mk |---sub1 |------Android.mk |------main.c |---sub2 |------An ...

  7. JAVA设计模式之单例模式(单件模式)—Singleton Pattern

    1.什么是单例模式? <Head First 设计模式>中给出如下定义:确保一个类只有一个实例,并提供一个全局访问点. 关键词:唯一实例对象. 2.单例模式的实现方式: 2.1 懒汉式 对 ...

  8. P1352 没有上司的舞会[树形dp]

    题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...

  9. Java原子类--框架

    根据修改的数据类型,可以将JUC包中的原子操作类可以分为4类. 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: AtomicIn ...

  10. Tornado之Session实现

    Tornado框架中,默认执行Handler的get/post等方法之前默认会执行 initialize方法,所以可以通过自定义的方式使得所有请求在处理前执行操作 import tornado.iol ...