一、相应事件

keydown:按下键盘上的任意键都可触发,按着不放则重复触发

keypress:按下键盘上的字符键时触发,按着不放则重复触发

keyup:释放按键时触发

事件顺序:keydown>keypress>keypup

在文本框中捕获按键事件需要注意的地方:

1.keydown、keypress是在文本框内容变化前发生,keyup则是在文本框变化后发生。

2.如果输入的是中文,keypress不会触发,改用dom3级的textInput事件(也就是必须通过addEventListener来监听)

二、如何获取按键值

在js获取键盘按下的键值有:event.keyCode、event.charCode和event.which。

谷歌浏览器:对event.keyCode、event.charCode和event.which都兼容。

火狐浏览器:对event.keyCode部分键值有效,如上下左右键(37,38,39,40),enter键(13),PgUp(33),PgDn(34)等部分有效,对数字键,字母键无效。

event.which也是部分键值有效,如字母键,数字键,enter键,Backspace键等有效,对上下左右键,PgUp(33),PgDn(34)键无效。

event.charCode也是对部分键值有效,如字母键,数字键,,Backspace键等有效,对enter键,上下左右键,PgUp(33),PgDn(34)键无效。

ie浏览器:中,IE8及以下浏览器无event.charCode和event.which,event.keyCode对大部分键值能获得,但是有少部分也不能获得

兼容性的写法如下:

var code=e.keyCode || e.which || e.charCode

三、该用什么事件来获取按键值

  • KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
  • KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
  • KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
  • KeyPress 只能捕获单个字符,KeyDown 和KeyUp 可以捕获组合键。
  • KeyPress 可以捕获单个字符的大小写,KeyDown和KeyUp 不能。
  • KeyPress 不区分小键盘和主键盘的数字字符,KeyDown 和KeyUp 区分。

总结:用keypress事件对象获取按键字符,用keydown事件获取功能字符(如Enter,Backspace等)

js键盘相关知识总结的更多相关文章

  1. JS作用域相关知识(#精)

    在学习<你不知道的JS>一书中,特将作用域相关知识在此分享一下: #说到作用域,就不得不提到LHS查询和RHS查询: 1)如果查询目的是对变量进行赋值,则使用LHS查询 2)如果查询目的是 ...

  2. JS基础理论相关知识

    1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML 元素必须被关闭.标签名必须用 ...

  3. js数组相关知识集合

    一.js数组快速排序 <script type="text/javascript"> var arr = [1, 2, 3, 54, 22, 1, 2, 3]; fun ...

  4. js作用域相关知识总结

    以前总是搞不清楚js里面的作用域.块级作用域.预解析,做题总做错,今天彻底搞明白了,来记录梳理一下~ 块级作用域 在其他语言中,任何一对花括号中的语句都属于一个块儿,在这之中定义的所有变量在代码块外都 ...

  5. codewars--js--vowels counting+js正则相关知识

    问题描述: Return the number (count) of vowels in the given string. We will consider a, e, i, o, and u as ...

  6. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  7. 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...

    原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...

  8. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  9. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

随机推荐

  1. 「Luogu-U18201」分析矿洞

    题目 没有看懂题目呢说的是什么,但是我们要求的是这个式子 \[Ans=\sum_{i=1}^n\sum_{j=1}^n\varphi(gcd^2(i,j))\] 看起来挺鬼畜的是吧 老方法枚举\(gc ...

  2. Android学习笔记_38_图片的拖动、缩放功能和多点触摸

    一.基础知识: 引用 理论上 Android可以处理 多达256 个手指的触摸,大概只有章鱼哥能享受这种技术带来的便利.就编程人员来说,编写多点触摸和单点触摸的方式几乎一模一样.其奥秘在于Motion ...

  3. maven pom 增加本地jar 依赖

    https://www.cnblogs.com/huhongy/p/7337280.html <dependency> <groupId>org.hamcrest</gr ...

  4. spring入门(八) spring mvc设置默认首页

    1.web.xml配置如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...

  5. App 分辨率相关 - iOS

    针对现有 Apple 设备分辨率小归总,方便日常查看; 顺便推荐一款图片生成工具,个人感觉挺方便好用,放置一张高分辨率大图可自动生成一套配图,软件名称(App Icon Gear). 具体设备分辨率如 ...

  6. Keepalived 配置高可用

    VRRP协议及Keepalived原理使用   VRRP 协议即 Virtual Router Redundancy Protocol,虚拟路由器冗余协议, 为了解决局域网内默认网关单点失效的问题.  ...

  7. ABAP术语-IAC (Internet Application Components)

    IAC (Internet Application Components) 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/20/107455 ...

  8. 爬虫——正则表达式re模块

    为什么要学习正则表达式 实际上爬虫一共就四个主要步骤: 明确目标:需清楚目标网站 爬:将所有的目标网站的内容全部爬下来 取:在爬下来的网站内容中去掉对我们没有用处的数据,只留取我们需要的数据 处理数据 ...

  9. BootStrap的动态模态框及静态模态框

    1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html&g ...

  10. Python 一些好玩的函数

    一.匿名函数 什么匿名是函数: 不需要使用def函数名的函数或者子程序 函数语法: lambda 参数:表达式 函数特点: 1.lambda只是一个表达式,省去定义函数过程,让代码更精简 2.lamb ...