有时候我们需要捕获页面上的回车事件,以达到一些特殊效果,例如在登录页面用户输入完登录名和密码后习惯直接敲回车,这时需要捕获回车事件,在回车事件中激活form元素

1.纯Java Script版

首先要捕获 document对象的按钮弹起事件(捕获按下事件也可以),浏览器会将用户按下的按键信息对象传递到事件回调函数中(以参数的形式),传入函数中的这个按键信息中包含了一个用来识别按键的编号(每个按键都有一个对应的编号),而回车按键对应的编号就是13,所以我们取出按键信息对象中的这个编号,判断它是不是13就可以了,初始版本如下:

 document.onkeyup = function (e) {//按键信息对象以函数参数的形式传递进来了,就是那个e
var code = e.charCode || e.keyCode; //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码,但少部分浏览器使用的却是charCode)
if (code == 13) {
//此处编写用户敲回车后的代码
}
}

可这样有个问题,在旧版IE下,按键信息对象并不是直接传递到函数中的,所有的事件对象是存储在window.event中的,所以为了兼容旧版IE,我们可以先判断一下window.event这个对象存在不存在,若存在,说明是旧版IE浏览器,如果不存在,说明是chrome、火狐之类的新式浏览器,改良版如下:

document.onkeyup = function (e) {
if (window.event)//如果window.event对象存在,就以此事件对象为准
e = window.event;
var code = e.charCode || e.keyCode;
if (code == 13) {
//此处编写用户敲回车后的代码
}
}

2.Jquery版

思路和纯JavaScript代码类似,不过Jquery实现起来可能更简单一些,因为Jquery本身就已经在某些方面做了浏览器兼容性设置,所以代码会比较简洁一些

 $(document).keyup(function (e) {//捕获文档对象的按键弹起事件
if (e.keyCode == 13) {//按键信息对象以参数的形式传递进来了
//此处编写用户敲回车后的代码
}
});

转自:曾经最美的记忆

js && Jquery 的回车事件的更多相关文章

  1. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  2. jquery响应回车事件

    简单地记下jquery实现回车事件,代码如下: 全局: $(function(){document.onkeydown = function(e){     var ev = document.all ...

  3. jquery 键盘回车事件

    <input id="search" placeholder="输入要领用的资产条码" id="scanCode" type=&quo ...

  4. jquery绑定回车事件

    //回车事件绑定 $(".left-content").keyup(function(event){ var theEvent = event || window.event; v ...

  5. js监听回车事件

    标题通俗的说,也就是绑定当用户按下回车键要执行的事件. 下面,入正题. 第一步,先编写简单的页面代码,这里我们只需要一个按钮就足够了.当然,还有按钮事件. <html> <head& ...

  6. js dom添加回车事件

    <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta ...

  7. js捕获页面回车事件

    1.javascript版 document.onkeyup = function (e) { if (window.event)//如果window.event对象存在,就以此事件对象为准 e = ...

  8. form表单回车提交问题,JS监听回车事件

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...

  9. js&jquery:添加事件的三种方法和常用的一些事件

    一.添加事件的方法 1.EventTarget.addEventListener添加 获取事件目标元素,通过addEventListener函数添加 // Assuming myButton is a ...

随机推荐

  1. css怎么让li水平排列和div居中

    让li向左浮动即可 给div定一个宽度,然后margin:0 auto;即可:

  2. opencv-python教程学习系列6-用滑动条做调色板

    前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍opencv-python用滑动条做调色板,坚持学习,共同进步. 系列教程参照OpenCV-Pyt ...

  3. Plotly绘图工具(多用于统计)

    作者:桂. 时间:2017-04-23  23:52:14 链接:http://www.cnblogs.com/xingshansi/p/6754769.html 前言 无意中考到一个小工具,网址为: ...

  4. Gym 101745 D.Stamp Stamp Stamp

    题目网页链接: http://codeforces.com/gym/101745/problem/D 思路:首先可以确保能够成功染色的字符串都是结果串的子串,那么O(n^2)枚举子串之后dp转移即可. ...

  5. 【转】Python xlrd、xlwt、xlutils读取、修改Excel文件

    Python xlrd.xlwt.xlutils读取.修改Excel文件 一.xlrd读取excel 这里介绍一个不错的包xlrs,可以工作在任何平台.这也就意味着你可以在Linux下读取Excel文 ...

  6. Cannot find config.m4. Make sure that you run '/usr/local/php/bin/phpize' in the top level source directory of the module的 解决方法

    cp /php-7.1.22/ext/openssl/config0.m4 /usr/local/php/bin/config.m4

  7. (2)集合 遍历set集合

    set集合的一些方法 Set<String> set1=new HashSet<String>(); set1.add("a"); set1.add(&qu ...

  8. php empty详解

    判断字符串是否为空,可以这么判断: if ($value=="") ...    * 格式:bool empty ( mixed var )    * 功能:检查一个变量是否为空  ...

  9. weex-toolkit 使用

    weex-toolkit 的github地址:https://github.com/weexteam/weex-toolkit weex-toolkit: 初始化的项目是针对开发单个 Weex 页面而 ...

  10. ES(2): Build ES Cluster on Azure VM

    目录: 系统环境准备 安装ES集群 安装Kibana 安装x-pack 安装head 系统环境准备 参见: HDP2.4安装(二):Centos7配置 修改network: 修改hosts: 配置ss ...