keyCode 与charCode

键盘事件拥有两个属性,keyCode和CharCode,他们之间有一些不一样之处。keyCode表示用户按下键的实际的编码,而charCode是指用户按下字符的编码。

IE下

keyCode:对于keypress事件,表示按下按键的Unicode字符;对于keydown/keyup 事件,表示按下按键的数字代码。无charCode属性。

DOM标准下

keyCode:表示按下按键的数字代码。

charCode:按下按键的Unicode字符。

当我按下“a”键(注意是小写的字母)时,

在火狐中会得到

keydown:keyCode is 65  charCode is 0

keypress:keyCode is 0   charCode is 97

keyup:  keyCode is 65  charCode is 0

在谷歌中会得到

keydown:keyCode is 65  charCode is 0

keypress:keyCode is 97  charCode is 97

keyup:  keyCode is 65  charCode is 0

在IE中会得到

keydown:keyCode is 65  charCode is undefined

keypress:keyCode is 97  charCode is undefined

keyup:  keyCode is 65  charCode is undefined

而当我按下shift键时,

在火狐中会得到

keydown:keyCode is 16  charCode is 0

keyup:  keyCode is 16   charCode is 0

不会得到任何的charCode值,因为按shift并没输入任何的字符,而且也不会触发keypress事件。

在谷歌中会得到

keydown:keyCode is 16  charCode is 0

keyup:  keyCode is 16   charCode is 0

在IE中会得到

keydown:keyCode is 16  charCode is undefined

keyup:  keyCode is 16   charCode is undefined

小结:

1.在keydown事件里面,事件包含了keyCode – 用户按下的按键的物理编码。

2.在keypress里,keyCode包含了字符编码,即表示字符的ASCII码。这样的形式适用于所有的浏览器 – 除了火狐,它在keypress事件中的keyCode返回值为0。

如果你想获取用户实际敲击的按钮,用keydown事件来获取事件对象,并获取keyCode值,这在所有浏览器都行的通。另一方面,如果你想获取用户输入的字符,那么就使用keypress来获取,然后获取charCode(火狐和safari)或是keyCode(其他浏览器)。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>keyCode属性-蚂蚁部落</title>
<script type="text/javascript">
/*function keyEvent(ev){
  var ev=ev||window.event;

    alert(ev.keyCode);
} 

document.onkeydown=keyEvent; */

function keyEvent(ev){
  var ev=ev||window.event;

    alert(ev.charCode);
}
document.onkeypress=keyEvent;
//火狐下onkeypress a-------97 ,onkeydown a --------0
//火狐下onkeypress b-------98 ,onkeydown b --------0

  var getCharCode = function(ev){
    var ev=ev||window.event;
        if (typeof ev.charCode == "number"){
            alert(ev.charCode);
            return ev.charCode;
        } else {
            alert(ev.keyCode);
            return ev.keyCode;
        }
    }

document.onkeydown=getCharCode;
//a--------65
//b--------66

</script>
</head>
<body>
</body>
</html>

由于浏览器差异键值输出差异,给出个兼容获取键值的方法

var getCharCode = function(ev){
    var ev=ev||window.event;
        if (typeof ev.charCode == "number"){
            //alert(ev.charCode);
            return ev.charCode;
        } else {
            //alert(ev.keyCode);
            return ev.keyCode;
        }
    }
时间: 2024-10-04 09:07:55

keyCode 与charCode的相关文章

js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性

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键等有效,

(转)keyCode和charCode

键盘事件拥有两个属性,keyCode和CharCode,他们之间有一些不一样之处.keyCode表示用户按下键的实际的编码,而charCode是指用户按下字符的编码. IE下 keyCode:对于keypress事件,表示按下按键的Unicode字符:对于keydown/keyup 事件,表示按下按键的数字代码.无charCode属性. DOM标准下 keyCode:表示按下按键的数字代码. charCode:按下按键的Unicode字符. 当我按下“a”键(注意是小写的字母)时, 在火狐中会得

java Script 中的keyCode 和charCode

其实很长一段时间,我都没有完全弄明白keyCode 和charCode ,自己也认真看过,但是就是理解不透彻,为了防止以后再出现混乱,写篇博客记录一下吧! 首先  在不同的浏览器中,他们有不同的说法哦. IE   keyCode  IE浏览器中event对象的属性(方法), 类型:Integer      可读写 描述:对于keypress事件,指示按下的键的Unicode字符;对于keyup\keydown 事件,指示按下的键盘是数字表示键. /*获取键盘的keycode 值*/       

JQuery 学习总结及实例 !! (转载)

出自 new:http://www.jianshu.com/users/1967b163cb61/latest_articles 1.JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQ

Document Object Model (DOM) Level 3 Events Specification

Document Object Model (DOM) Level 3 Events Specification W3C Working Draft 25 September 2014 This version: http://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/ Latest published version: http://www.w3.org/TR/DOM-Level-3-Events/ Latest editor's dr

JavaScript事件---事件对象

原文:JavaScript事件---事件对象 发文不易,若转载传播,请亲注明出处,谢谢!   内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一.事件对象 事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三

商城商品购买数量增减的完美JS效果

近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验. 数量一定是数字 点击增减按钮的时候要能自动加1或减1 用户输入的内容如果是非数字,则不能输入(退格键除外) 用户输入的值最小为1 输入框离开焦点时要检查取值范围,确保输入框中必须是范围内的数字 基本就是以上几点 效果如下: 以下是Html代码 <div class="bookNum"> <a id="sub&qu

Js收藏-转

/** * <P> Title: JavaScript Util </P> * <P> Description: JavaScript 工具 </P> * <P> Modify: 2011/11/30 </P> * @author 冯万里 * @version 1.0 * * 为减少 js 关键词的占用,此文件只占用“c$”一个关键词; * 使用时用: c$.函数名(参数列表); 或者 c$().函数名(参数列表) * 字符串操作函数

JS之Event事件

<script> function ff(event) { var e = window.event||event;//Event对象:发生当前事件的状态 // var src = e.srcElement||e.target;//获得事件中的value值 var c = e.keycode||e.charCode;//获得键盘输入的值的编码 // alert(e); // alert(src.value); alert(c); } /** var e; if(window.event){ e