js键盘相关知识总结
一、相应事件
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键盘相关知识总结的更多相关文章
- JS作用域相关知识(#精)
在学习<你不知道的JS>一书中,特将作用域相关知识在此分享一下: #说到作用域,就不得不提到LHS查询和RHS查询: 1)如果查询目的是对变量进行赋值,则使用LHS查询 2)如果查询目的是 ...
- JS基础理论相关知识
1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML 元素必须被关闭.标签名必须用 ...
- js数组相关知识集合
一.js数组快速排序 <script type="text/javascript"> var arr = [1, 2, 3, 54, 22, 1, 2, 3]; fun ...
- js作用域相关知识总结
以前总是搞不清楚js里面的作用域.块级作用域.预解析,做题总做错,今天彻底搞明白了,来记录梳理一下~ 块级作用域 在其他语言中,任何一对花括号中的语句都属于一个块儿,在这之中定义的所有变量在代码块外都 ...
- 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 ...
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- 【转载】前端面试“http全过程”将所有HTTP相关知识抛出来了...
原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射 ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
随机推荐
- CF666E 【Forensic Examination】
题目 每天一道\(SAM\)真是非常开心 一看就是广义\(SAM\)+线段树合并了 我们存好\(S\)串每一个前缀的终点,之后在\(parent\)树上倍增找到表示\(S[l,r]\)这个子串的节点, ...
- 第12章 GPIO输出—使用固件库点亮LED
本章参考资料:<STM32F76xxx参考手册>.库帮助文档<STM32F779xx_User_Manual.chm>. 利用库建立好的工程模板,就可以方便地使用STM32 H ...
- 课时15.DTD文档声明下(了解)
W3C的官方网站是W3School,我们可以去官方网站查询DTD文档声明. HTML4.01 Strict 非常严谨的 如果你写了这个DTD文档声明,你就不能写如下样式: <fon ...
- vue 修改框架less变量
以vant框架为例,vue项目以less作为css处理器: less/var-reset.less @import '~vant/lib/index.less'; // Color variables ...
- iOS Alamofire插件使用方法
let parameters = [ " ] Alamofire.request("http://110.185.104.100:8888/skproject/HvLogistic ...
- c#项目总结
写了将近10年代码了,最后休息,回想了下,感觉什么都没有. 所以打算写一些总结性的文章,先写几个项目,用于c#各个方向的封装使用 最后汇总成一个完善的解决方案.所有项目都在一个解决方案FastAIFr ...
- SPOJ PRIME1 - Prime Generator(线性筛)
Peter wants to generate some prime numbers for his cryptosystem. Help him! Your task is to generate ...
- ABAP术语-Implementation
Implementation 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/22/1077076.html The concrete cod ...
- ABAP术语-ALE
ALE 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/13/993351.html Application Link Enabling (A ...
- GIt+jenkins代码自动上线
代码自动上线功能 企业部署代码上线是件比较麻烦的事情,还好我们有jenkins这个持续集成的软件可以帮助我们做很多的事情,现在我们就 来测试用jenkins推送代码上线. 我们这里测试的是一个html ...