js键盘相关知识总结

一、相应事件

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

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

keyup:释放按键时触发

事件顺序:keydown>keypress>keypup

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

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

2.如果输入的是中文,keypress不会触发

二、如何获取按键值

在js获取键盘按下的键值有:event.keyCodeevent.charCodeevent.which

谷歌浏览器:event.keyCodeevent.charCodeevent.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.whichevent.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等)

原文地址:https://www.cnblogs.com/94pm/p/9470113.html

时间: 2024-09-28 04:44:07

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

js作用域相关知识总结

以前总是搞不清楚js里面的作用域.块级作用域.预解析,做题总做错,今天彻底搞明白了,来记录梳理一下~ 块级作用域 在其他语言中,任何一对花括号中的语句都属于一个块儿,在这之中定义的所有变量在代码块外都是不可见的.Js中没有块级作用域 一个感觉在面试中会经常遇到的问题 for(var i =0;i<10;i++){ var num = 100; } console.log(i); //i是多少 第一反应是i是9,但是错了,i是10.因为按照循环条件,i肯定是在0-10之间,当i=9的时候,都还在执

js事件相关知识

事件 事件就是用户或浏览器自身执行的某种动作,如click.load等,都是事件的名字.而响应某个事件的函数就是事件处理程序或事件侦听器,通常以“on+事件名字”命名,如onclick.onload. 事件最早是在IE3和Netscape Navigator2中出现的,当时是作为分担服务器运算负载的一种手段.在IE4和Navigator4发布时提供了相似但不相同的API. 事件流 从页面中接收事件的顺序.IE和Netscape开发团队提出了差不多是完全相反的事件流的概念.IE提出的是事件冒泡流,

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

原文:前端面试“http全过程”将所有HTTP相关知识抛出来了... 来一篇串通,一个http全过程的问题,把所有HTTP相关知识点都带过一遍 http全过程 输入域名(url)-->DNS映射为IP-->TCP三次握手-->HTTP请求-->HTTP响应-->(浏览器跟踪重定向地址)-->服务器处理请求-->服务器返回一个html响应-->(视情况决定释放TCP连接)-->客户端解析HTML-->获取嵌入在HTML中的对象重新发起http请求

(整理)ubuntu 的 相关知识(来自 鸟哥的私房菜)

1. Linux 文件权限概念 $ ls 察看文件的指令 $ ls -al 出所有的文件详细的权限与属性 (包含隐藏档,就是文件名第一个字符为『 . 』的文件) 在你第一次以root身份登入Linux时, 如果你输入上述指令后,应该有上列的几个东西,先解释一下上面七个字段个别的意思: 图2.1.1.文件属性的示意图 第一栏代表这个文件的类型与权限(permission): 这个地方最需要注意了!仔细看的话,你应该可以发现这一栏其实共有十个字符:(图2.1.1及图2.1.2内的权限并无关系) 图2

grunt 相关知识

module.exports = function(grunt){ // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//添加banner }, //任务一:压缩a.js,不混淆变量名

web聊天相关知识

http相关知识 http是无状态,请求,响应模式的通信模式,就是用户每次通过浏览器点击一下页面,都需要重新与web服务器建立一下连接,且发送自己的 session id 给服务器端以使服务器端验证此用户的身份.客户端若想从web服务器上获取数据,必须主动发起一个请求,然后接收服务器端的返回,服务器端不会主动向客户端推送消息. 基于传统的web服务器只会被动响应客户端请求的这个特性,想实现web实时聊天的需求,有以下几个方式:   轮询(polling) 轮询,客户端向服务器发出请求以获取一些数

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

AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中,需要通过AJAX去访问另一个服务器并返回数据,这时候就会受到浏览器跨域的安全限制了. 这里要注意,如果只是通过AJAX向另一个服务器发送请求而不要求数据返回,是不受跨域限制的.浏览器只是限制不能访问另一个域的数据,即不能访问返回的数据,并不限制发送请求. 我们接下来就为

HTML入门基础教程相关知识

HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面.html文件是带有格式标识符和超文本链接的内嵌代码的ascii 文本文件——html结构了解. html文本是由 html命令组成的描述性文本,html 命令可以说明文字. 图形.动画.声音.表格.链接等. html网页结构包括头部 (head).主

相关知识: JavaScript

相关知识: JavaScript JavaScript是一种编程语言,它被广泛用来实现web站点和应用中的交互效果. JavaScript可以同样式进行交互,你可以通过编写程序来动态改变文档上元素的样式. 有三种方法可以实现这样的效果: 控制样式表—可以添加.删除.修改样式表. 控制样式规则—可以添加.删除.修改样式规则. 控制DOM中的单个元素—可以不依赖样式表来修改元素样式. 更多细节 要了解 JavaScript的更多细节,可以到这个wiki JavaScript . 范例: 一个Java