- 浏览: 3462211 次
- 性别:
- 来自: China
文章分类
- 全部博客 (536)
- ajax (1)
- Algorithm (14)
- Android (40)
- CSS/HTML... (2)
- defy (3)
- DesignPattern (2)
- dorado (0)
- Drools (6)
- English/日本語 (7)
- Flex (2)
- Framework (0)
- Google (3)
- hibernate (13)
- homework (3)
- HTML5 (0)
- IDE (29)
- java (45)
- javaee (7)
- Javascript (14)
- java组件 (5)
- jQuery (4)
- jsp (8)
- jsf (2)
- Linux (2)
- lucene (0)
- mysql (6)
- news (3)
- Oracle (8)
- other (4)
- PHP (5)
- Python (0)
- Software Engineering (3)
- spring (7)
- struts1.x (14)
- struts2.x (14)
- strolling in cloud (1)
- subject:javaEnhance (20)
- Tomcat (7)
- validator (3)
- 学习·方法·心得 (8)
- .NET (2)
- vba (6)
- groovy (5)
- grails (2)
- SWT (0)
- big data (1)
- perl (1)
- objective-c (50)
- product (1)
- mac (7)
- ios (188)
- ios-phone (2)
- ios-system (15)
- ios-network (5)
- ios-file (4)
- ios-db (1)
- ios-media (3)
- ios-ui (27)
- ios-openSource (6)
- ios-animation (5)
- ios-drawing (7)
- c (2)
- ios-app (2)
- ios-course (15)
- ios-runtime (14)
- ios-code (8)
- ios-thread (8)
- ios-LBS (2)
- ios-issue (1)
- ios-design (2)
- Jailbreak (2)
- cocos2d (0)
- swift (16)
- ios-framework (4)
- apple watch (4)
- ios-web (1)
- react native (3)
- TVOS (1)
- OpenGL (1)
最新评论
-
xiaobinggg:
...
Session机制详解 -
菜鸟学生会:
Drools规则工作流引擎开发教程网盘地址:http://pa ...
Drools入门-----------环境搭建,分析Helloworld -
wangyudong:
不是很好用,不支持自动化测试RESTful API,也不支持自 ...
Simple REST Client POST使用方法 -
Paul0523:
很棒的一篇文章,感谢楼主分享
Session机制详解 -
啸笑天:
获取原型对象的三种方法<script>functi ...
复习JavaScript面向对象技术
javascript判断是否按回车键
<input id="chatMsg" name="chatMsg" type="text"
size="90" onkeypress="enterHandler(event);"/>
function enterHandler(event)
{
//获取用户单击键盘的“键值”
var keyCode = event.keyCode ? event.keyCode
: event.which ? event.which : event.charCode;
//如果是回车键
if (keyCode == 13)
{
sendRequest();
}
}
一、onkeyup,onkeydown,onkeypress
在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下:onkeydown > onkeypress >onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。
onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。
由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的,而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。
在Maxthon浏览器中,onkeydown和onkeyup有连续响应两次键盘事件的BUG,onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题),具体原因不明。不知道以后是否会进行订正。
键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a.
在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型,浏览器中的事件主要有HTML事件、鼠标事件和键盘事件,前两种事件比较好理解,这里主要解释一下键盘事件以及它在IE和firefox中的区别.
还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等
下面说一下键盘事件的具体使用方法,
键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)
在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符
当捕捉的是keypress事件时,当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0
注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先传递到网页,再向外传递
鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件
键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键,这三个属性使用比较简单,三种事件都可以使用,也不存在ie和ff的兼容性问题
Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替,IE用event.keCode方法获取当前被按下的键盘按键值,而NetScape/FireFox/Opera用的则是event.which
发表评论
-
macrotask和microtask
2017-11-22 16:49 0原文地址:https://github.com/easy ... -
React 高阶组件(HOC)
2017-11-22 16:55 2596原文地址:https://github.com/easy ... -
《ECMAScript 6 入门》笔记
2017-07-15 11:47 922let 和 const 命令 https://gi ... -
js的多种继承方式
2015-07-23 21:52 737构造函数的继承 function ... -
静态页面间数据传递方法总结
2012-03-09 10:41 2034静态压面间数据的传递方法很多,目前经搜索得到主要以下几种方法。 ... -
是生生世世
2011-10-19 08:31 0dialect -
复习JavaScript面向对象技术
2011-09-15 00:11 1753感谢http://sdcyst.iteye.com/ ... -
阿萨德
2011-05-16 23:37 0各位面试官,老师,同学们你们好,我叫朱阳俊,87年出 ... -
撒旦撒打算的
2011-04-19 22:30 0/*** * Excerpted from &quo ... -
sadas
2011-04-12 13:19 0/*** * Excerpted from &quo ... -
结网会辉煌季后ij
2011-02-24 10:30 0http://hunch.com/professions/ ... -
JavaScript 对象
2010-10-31 23:58 1414对象与数组 JavaScript中的对象本质上是一个关联 ... -
JavaScript变量 没有块范围
2010-10-31 21:38 2244局部变量覆盖全局变量,如下: <script&g ... -
根据IP自动切换城市(腾讯网接口)
2010-10-16 10:57 2367<script src="http: ... -
javascript中event.keycode大全
2010-06-12 09:07 2380keycode 8 = BackSpace BackSpa ... -
深入理解Javascript闭包(closure)
2010-05-31 22:07 1226感谢http://softbbs.pconline.co ... -
Aptana使用入门一:Code Assist
2009-12-14 12:07 1970两天我在《不可多得的Javascript(AJAX)开发工具 ... -
不可多得的Javascript(AJAX)开发工具 - Aptana
2009-12-14 12:05 1834自从开始做Web开发起,一直都没有找到一个很让人满意的Java ... -
Javascript刷新页面的几种方法
2009-11-21 13:14 5597Javascript刷新页面的几种方法 非模态刷新父页面:wi ...
相关推荐
在阅读本文前,相信大家应该都有所了解,在js获取键盘按下的键值有:event.keyCode、event.charCode和event.which。 其中: 谷歌浏览器:对event.keyCode、event.charCode和event.which都兼容。 火狐浏览器:对event...
为了实现跨浏览器兼容性,jQuery内部对`event.which`进行了处理,如果`event.which`为null,而`event.charCode`或`event.keyCode`不为null,则会将它们的值赋给`event.which`。 此外,`event.which`不仅可以用于...
`event.charCode`可获取到产生的字符代码。 二、监听键盘事件 使用`addEventListener`方法可以监听键盘事件: ```javascript document.addEventListener('keydown', function(event) { console.log('Key pressed...
var charCode = event.charCode || event.keyCode; var isNonAscii = charCode > 127; if (!isNonAscii && charCode !== 0) { // ASCII character pressed } } ``` 4. 使用`event.preventDefault()`和`event...
上面的示例代码中,通过`theEvent.keyCode`、`theEvent.which`以及`theEvent.charCode`分别获取了不同浏览器环境下的按键码。 - **`keyCode`**:适用于大多数情况,但在某些浏览器(如Firefox)中可能无法区分某些...
2. `event.charCode`:返回按下的字符的Unicode值,适用于打印键。 3. `event.key`:返回按下的键的标准化标识符,例如"Enter"、"Esc"等。 4. `event.ctrlKey`、`event.altKey`、`event.shiftKey` 和 `event.metaKey...
` 这行代码则是为了兼容不同的浏览器特性,其中`e.keyCode` 主要用于IE浏览器,而 `e.which` 和 `e.charCode` 则主要用于Firefox和其他浏览器。 #### 三、实践应用示例 ##### 1. 键盘事件捕获 ```javascript ...
而`event.which`对于键盘事件等同于`event.charCode || event.keyCode`,对于鼠标事件,它返回1(左键)、3(右键)或2(中键)。 `event.type`属性则包含了事件的类型,如"click"、"mouseover"等,方便开发者区分...
这段代码确保在键盘事件中,如果`event.which`未定义,那么它会根据`event.charCode`或`event.keyCode`来设置`event.which`的值。 对于鼠标事件,jQuery进行了额外的处理: ```javascript if ( !event.which && ...
键盘事件中keyCode、which和charCode的兼容性测试 在前端开发中,键盘事件是一个非常重要的事件类型,它可以捕捉用户在键盘上的输入操作。键盘事件中有三个关键属性:keyCode、which和charCode,这三个属性都是用于...
- **which**:兼容性更好的键码获取方式,等同于`keyCode`或`charCode`。 #### 四、示例代码 下面是一段简单的示例代码,用于演示如何监听键盘事件: ```javascript document.addEventListener('keydown', ...
- 当处理键盘事件时,要考虑到不同浏览器之间的差异,例如,有些浏览器可能需要使用`event.charCode`而非`event.keyCode`来获取字符的Unicode编码。 - 键盘事件还有其他属性,如`event.shiftKey`(判断Shift键是否被...
它可以标准化不同浏览器的event.keyCode和event.charCode的差异,返回一个数值来代表按键。例如,鼠标左键单击时event.which返回1,中间键返回2,右键返回3。 6. this 和 event.target 的区别 在jQuery事件处理函数...
event.which : event.charCode; if (keyCode == 13) { var i; for (i = 0; i < field.form.elements.length; i++) if (field == field.form.elements[i]) break; i = (i + 1) % field.form.elements.length; ...
- `charCode`:`keypress`事件中可用,表示被按下的键所对应的字符值。 #### 3. 浏览器兼容性问题 - **不同浏览器的区别**: - 在Firefox和Opera中,功能键也会触发`keypress`事件。 - IE和其他浏览器之间在...
- `charCode`:在某些情况下,表示按下的字符的Unicode编码。 - `type`:事件类型,如"keydown"。 - `srcElement`和`target`:与鼠标事件相同,表示事件发生在哪个元素上。 - `which`:在旧版浏览器中,表示按下...
event.which : event.charCode; return keyCode; } ``` 有了获取键值的函数之后,接下来就可以编写监听回车键按下事件的代码了。例如,可以为文本输入框绑定一个keydown事件,当检测到回车键被按下时执行一个特定...
event.which : event.charCode; } // 判断是否按下Enter键 if (Code == 13) { for (var i = 0; i < inputs.length; i++) { if (inputs[i].id === document.activeElement.id) { i = i === (inputs.length - ...