JavaScript 键盘事件实例

eyCode 获取用户按下键盘的哪个按键

例子：键盘控制Div移动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');

if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
else if(oEvent.keyCode==39)
{

oDiv.style.left=oDiv.offsetLeft+10+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

其他属性 ctrlKey、shiftKey、altKey

例子：提交留言回车提交 ctrl+回车提交

实例1: 点击按钮提交留言

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="发布" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

实例2: 回车提交

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');

oTxt1.onkeydown=function (ev)
{
var oEvent=ev||event;

if(oEvent.keyCode==13) //判断回车键(Enter)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

实例3: ctrl+回车提交

得收藏的HTML DOM事件和鼠标键盘事件

onabort//图像的加载被中断。

onblur//元素失去焦点。

onchange//域的内容被改变。

onclick//当用户点击某个对象时调用的事件句柄。

ondblclick//当用户双击某个对象时调用的事件句柄。

onerror//在加载文档或图像时发生错误。

onfocus//元素获得焦点。

onkeydown//某个键盘按键被按下。

onkeypress//某个键盘按键被按下并松开。

onkeyup//某个键盘按键被松开。

onload//一张页面或一幅图像完成加载。

onmousedown//鼠标按钮被按下。

onmousemove//鼠标被移动。

onmouseout//鼠标从某元素移开。

onmouseover//鼠标移到某元素之上。

onmouseup//鼠标按键被松开。

onreset//重置按钮被点击。

onresize//窗口或框架被重新调整大小。

onselect//文本被选中。

onsubmit//确认按钮被点击。

onunload//用户退出页面。

值得收藏的HTML DOM事件和鼠标键盘事件

altKey//返回当事件被触发时，"ALT" 是否被按下。

button//返回当事件被触发时，哪个鼠标按钮被点击。

clientX//返回当事件被触发时，鼠标指针的水平坐标。

clientY//返回当事件被触发时，鼠标指针的垂直坐标。

ctrlKey//返回当事件被触发时，"CTRL" 键是否被按下。

metaKey//返回当事件被触发时，"meta" 键是否被按下。

relatedTarget//返回与事件的目标节点相关的节点。

screenX//返回当某个事件被触发时，鼠标指针的水平坐标。

screenY//返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey//返回当事件被触发时，"SHIFT" 键是否被按下。

值得收藏的HTML DOM事件和鼠标键盘事件

以上内容为互联网收集感谢关注与收藏

内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

DOM2级事件最初规定了键盘事件，但在最终定稿之前又删除了相应的内容；结果，对键盘事件的支持主要遵循的是DOM0级，DOM3级为键盘事件制定规范，但现代浏览器还没有完全实现；

txt.addEventListener("keydown", function(event){
    console.log(event);  // KeyboardEvent
});

KeyboardEvent类：

描述了用户与键盘的交互，提供了有关键的详细信息；其继承自UIEvent类；

其使用3个键盘事件用于识别不同的键盘活动类型：

keydown：按下键盘上的任意键时触发，且按住不放的话，会重复触发；
keypress：按下键盘上的字符键时触发，且按住不放的话，会重复触发；按下Esc也会触发这个事件；
keyup：释放键盘上的键时触发；

keydown和keyup是低级键盘事件，无论按下或释放任何键，都会触发；keypress是高级键盘事件，只有按下可打印的字符的键，才会触发它；

虽然所有元素都支持以上3个事件，但只有在通过文本框输入文本时才最常用；

在用户按了一下键盘上的字符键时，其触发事件顺序是：keydown –> keypress –> keyup；其中keydown、keypress在文本框发生变化之前被触发；而keyup则是在文本框已经发生变化之后触发；

如果用户按下一个字符键不放，就会重复触发keydown和keypress事件，直接用户松开该键为止；

如果按下的是一个非字符键，其触发事件顺序是：keydown –> keyup；如果按住这个非字符键不放，会一直重复触发keydown事件，直到用户松开为止，此时会触发keyup事件；

键盘事件也支持辅助键，其事件对象中也有shiftKey、ctrlKey、altKey和metaKey属性，IE不支持metaKey；

<p><textarea id="txtInput"></textarea>
    <textarea id="txt"></textarea></p>
<script>
var txtInput = document.getElementById("txtInput");
txtInput.addEventListener("keydown", handlerEvent, false);
txtInput.addEventListener("keypress", handlerEvent, false);
txtInput.addEventListener("keyup", handlerEvent, false);
function handlerEvent(event){
    var txt = document.getElementById("txt");
    event = event || window.event;
    txt.value += "\n" + event.type;
}
</script>

event对象属性：

键码keyCode属性：键盘上的键都会对应一个Unicode值，这个值就是keyCode键码；该属性已被DOM3废弃，但所有浏览器都支持它；

对于keydown及keyup事件来说，所有键被按下都可以被触发，所以它们关注的是键，其event对象的keyCode返回的就是键码，与键盘上一个特定的物理键对应；对于字符键来说，与它的大小写无关，如：字母A和a的值都是65；

txt.addEventListener("keydown", function(event){
     // 字母a和A均为65，回车为13，ctrl为17等
    console.log(event.keyCode);
});

键键码

退格（Backspace）8
制表（Tab）9
回车（Enter）13
上档（Shift）16
控制（Ctrl）17
Alt18
暂停/中断（Pause/Break）19
大写锁定（Caps Lock）20
退出（Esc）27
空格（Space）32
上翻页（Page Up）33
下翻页（Page Down）34
结尾（End）35
开头（Home）36
左箭头（Left Arrow）37
上箭头（Up Arrow）38
右箭头（Right Arrow）39
下箭头（Down Arrow）40
插入（Ins）45
删除（Del）46
字母键（A-Z）65-90
左Windows键91
右Windows键92
上下文菜单键93
数字小键盘0-996-105
数字小键盘+107
数字小键盘-及大键盘的-109
数字小键盘.110
数字小键盘/111
F1-F12112-123
数字锁（Num Lock）144
滚动锁（Scroll Lock）145
分号FF为59，其他为186
等于（=）187
小于（或逗号）188
减号（-）189
大于（或句号）190
正斜杠191
沉音符（`）192
等于61
左方括号219
反斜杠220
右方括号221
单引号222
Fn255

注：在Firefox和低版本的Opear中，分号键的值为59，即ASCII中分号的编码；但其他浏览器返回186，即键码；

对于keypress事件，只能是可打印字符键被按下才会触发，此时，keyCode返回的是该字符对应的Unicode字符代码，其与键码是不一样的；

txt.addEventListener("keydown", function(event){
    console.log("键码：" + event.keyCode); // A和a为65
});
txt.addEventListener("keypress", function(event){
    console.log("字符代码：" + event.keyCode); // A为65，a为97
});

键代码

0-948-57
A-Z65-90
a-z97-122
空格32
波浪符126
感叹号33
@64
#35
%37
&38
(40
)41
+43
* 42
^94
_95
左方括号91
反斜杠92
右方括号93
左花括号123
竖线124
右花括号125
单引号39
双引号34
冒号58
分号59
逗号44
句号46
斜框47
小于号60
大于号62
问号63
回车13

示例：

// 数字编辑限制
// 8: 退格键
// 46：Delete
// 37-46：方向键
// 48-57：小键盘区的数字
// 96-105：主键盘区的数字
// 110、190：小键盘区和主键盘区的小数点
// 189、109：小键盘区和主键盘区的负号。
// 13: 回车
// 9：Tab
var txt = document.getElementById("txt");
txt.addEventListener("keydown", numOnkeyDown, false);
function numOnkeyDown(event){
    if(!isValidNum(event.keyCode)){
        event.preventDefault();
        return false;
    }
}
function isValidNum(keyCode){
    return (keyCode == 8 ||
            keyCode == 9 ||
            keyCode == 46 ||
            keyCode == 109 ||
            keyCode == 110 ||
            keyCode == 189 ||
            keyCode == 190 ||
            (keyCode >= 37 && keyCode <= 46) ||
            (keyCode >= 48 && keyCode <= 57) ||
            (keyCode >= 96 && keyCode <= 105)
            );
}

示例：屏蔽按键组合键，如：

document.addEventListener("keydown", keyDownHandler, false);
function keyDownHandler(event){
    // 屏蔽Alt + 方向键
    if((event.altKey) && 
        ((event.keyCode == 37) || (event.keyCode == 39))){
            console.log("不能使用Alt+方向键前进或后退网页");
            event.preventDefault();
    }
    // 屏蔽退格删除键和F5刷新键
    if((event.keyCode == 8) || (event.keyCode == 116)){
        event.preventDefault();
    }
    // 屏蔽Ctrl + n
    if((event.ctrlKey) && (event.keyCode == 78)){
        event.preventDefault();
    }
    // 屏蔽F11，即全屏
    if(event.keyCode == 122){
        event.preventDefault();
    }
    // 以下为禁止查看网页源代码，即禁用
    // F12、Ctrl+Shift+I、Ctrl+u及鼠标右击
    // 屏蔽Ctrl + u，即查看源文件
    if((event.ctrlKey) && (event.keyCode == 85)){
        console.log("no no");
        event.preventDefault();
    }
    // 屏蔽Shift + F10，即网页菜单
    if((event.shiftKey) && (event.keyCode == 121)){
        event.preventDefault();
    }
    // 屏蔽F12
    if(event.keyCode == 123){
        event.preventDefault();
    }
    // 屏蔽Ctrl + Shift + I
    if(event.ctrlKey && event.shiftKey && (event.keyCode == 73)){
        event.preventDefault();
    }
}
// 屏蔽鼠标右键
document.addEventListener("contextmenu", function(event){
    event.preventDefault();
},false);

字符编码charCode属性：该属性返回 keypress 事件触发时按下的字符键的字符Unicode值，在其他事件中返回0；该事件已被DOM3废弃，推荐使用key属性代替它，但至今，所有浏览器都还支持；

txt.addEventListener("keypress", function(event){
    console.log("keyCode：" + event.keyCode);
    console.log("charCode：" + event.charCode); // 两者值一样
});

在keypress事件中，keyCode属性返回值（也是字符编码，因此它）与charCode一致；

IE8及以下和低版本的opear不支持charCode属性，它们是在发生keypress事件对象的keyCode中保存Unicode编码；

另外，某些低版本的浏览器在产生非打印字符时也会触发keypress事件，但此时其charCode值为0，为此可以检测其charCode属性值为0的情况；

特别要注意，通过中文输入法输入的字符，不会触发keypress事件，但会触发keydown及keyup事件，不过，事件对象的charCode为0，而keyCode总是返回229；

跨浏览器取得字符编码，添加到eventutil.js文件中：

    getCharCode: function(event){
        if(typeof event.charCode == "number")
            return event.charCode;
        else
            return event.keyCode;
    }

应用：

EventUtil.addHandler(txtInput, "keypress", function(event){
    event = EventUtil.getEvent(event);
    console.log(EventUtil.getCharCode(event));
});

which属性：返回一个键按下时的字符码(charCode)，可以发生在keydown、keyup和keypress事件中；如：

var txt = document.getElementById("txt");
txt.addEventListener("keypress", function(event){
    console.log(event.which);
    console.log(event.charCode);
},false);

在keypress事件中，其行为与值与charCode一致，在keydown及keyup事件中可以返回所有键的UniCode编码；

IE8 及其更早版本不支持 which 属性，不支持的浏览器可使用 keyCode 属性；另外，keyCode属性在Firefox的onkeypress事件中是无效的，所以，兼容这些浏览器可以：

var x = event.which || event.keyCode;

在DOM3事件标准中，已删除这个属性了，但所有的浏览器都支持该属性；

示例：

var username = document.getElementById("username");
var userpwd = document.getElementById("userpwd");
username.addEventListener("keydown", function(event){
    var keyCode = event.which ? event.which : event.keyCode;
    if(keyCode == 13)
        userpwd.focus();
});
userpwd.addEventListener("keydown", function(event){
    var keyCode = event.which ? event.which : event.keyCode;
    if(keyCode == 13)
        login();
    else
        return false;
});
function login(){
    console.log("登录");
}

key属性：DOM3级事件对键盘事件做出了一些改变，删除了keyCode、charCode和which属性，增加了新属性：key，用于获取键名；

console.log(event.key);

key属性是为了取代keyCode而新增的，它的值就是相应的文本字符（如“a”或“A”），就是键名，在按下非字符键时，key的值是相应键的名（如“Shift”或“Down”）；

示例：验证一个电话号码，只接受数字、+、（）、-、ArrowLeft、ArrowRight、Delete或Backspace，如：

txt.addEventListener("keydown", function(event){
    var key = event.key;
    var result = (event.key >= "0" && event.key <= "9") || 
        ["+","(",")","-","ArrowLeft","ArrowRight","Delete","Backspace"].includes(event.key);
    if(!result)
        event.preventDefault();
});

示例：使用按键移动元素：

<style>
#mouse {display: inline-block;cursor: pointer;margin: 0;}
#mouse:focus {outline: 1px dashed black;}
</style>
<p>单击选中图案，并使用方向键移动</p>
<pre id="mouse">
_   _
(q\_/p)
/. .\
=\_t_/=   __
/   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
nn^nn
</pre>
<script>
mouse.tabIndex = 0;
mouse.onclick = function() {
    this.style.left = this.getBoundingClientRect().left + 'px';
    this.style.top = this.getBoundingClientRect().top + 'px';
    this.style.position = 'fixed';
};
mouse.onkeydown = function(e) {
    switch (e.key) {
        case 'ArrowLeft':
        this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px';
            return false;
        case 'ArrowUp':
        this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px';
            return false;
        case 'ArrowRight':
        this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px';
            return false;
        case 'ArrowDown':
        this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px';
            return false;
    }
};
</script>

所有浏览器都支持key属性，IE还支持一个char属性，其作用与key类似，但只有字符键才返回值；

Safari和Chrome浏览器还为事件对象定义了类似key的keyIdentifier属性，对于功能键，返回“Shift”、“Enter”等，对于可打印字符，返回这个字符的Unicode编码，如A键，值就是“U+0041”；但目前所有浏览器都把这个属性删除了；

code属性：代表触发事件的物理按键；

txt.addEventListener("keydown", function(event){
    console.log("key：" + event.key);
    console.log("code：" + event.code);
});

字母键返回：“Key<Letter>”，如：“KeyA”，“KeyB”等；数字键返回：“Digit<number>”，如：“Digit0”、“Digit1”等；特殊键按其名称编码：“Enter”、“Backspace”、“Tab”等；

在不同的系统上，其所对应的物理按钮键值有差异，以下以windows为例：

键 code值

ESCEscape
数字0-9Digit0-Digit9
Minus"Minus"
Equal"Equal"
Backspace"Backspace"
Tab"Tab"
A-ZKeyA-KeyZ
Bracket"BracketLeft"/"BracketRight"
Enter"Enter"
Control"ControlLeft"/"ControlRight"
Semicolon"Semicolon"
Quote"Quote"
Backquote"Backquote"
Shift"ShiftLeft"/”ShiftRight”
Backslash"Backslash"
Comma"Comma"
Period"Period"
Slash"Slash"
Alt"AltLeft"/”AltRight”
Space"Space"
CapsLock"CapsLock"
F1-F12"F1"-“F12”
Pause"Pause"
ScrollLock"ScrollLock"
PrintScreen"PrintScreen"
Numpad0-9"Numpad0"-“Numpad9”
NumpadSubstract"NumpadSubtract" （减法）
NumpadAdd"NumpadAdd"（加法）
NumpadDecimal"NumpadDecimal"
NumpadMultiply"NumpadMultiply"
IntBackslash"IntlBackslash" （反斜杠，除法）
NumpadEqual"NumpadEqual" （等于）
NumLock"NumLock"
Home"Home"
End"End"
ArrowUp"ArrowUp"
ArrowLeft"ArrowLeft"
ArrowRight"ArrowRight"
ArrowDown"ArrowDown"
PageUp"PageUp"
PageDown"PageDown"
Insert"Insert"
Delete"Delete"
Meta"MetaLeft"/ “MetaRight
ContextMenu"ContextMenu"
Power"Power"
BrowserSearch"BrowserSearch"
BrowserFavorites "BrowserFavorites"
BrowserRefresh "BrowserRefresh"
BrowserStop "BrowserStop"
BrowserForward "BrowserForward"
BrowserBack "BrowserBack"
LaunchApp1LaunchApp1"
LaunchMail “LaunchMail"

另外，针对输入法输入，key属性是识别不了的，其会返回“Process“，而code属性返回还是其物理键码；

不同的语言，key值是不同的，但code是一样的；如：

document.addEventListener("keydown", function(event){
    if(event.code == "KeyZ" &&(event.ctrlKey || event.metaKey)){
        console.log("Undo");
    }
},false)

示例：用键盘控制一个元素：结构与样式：

<style>
.world{margin:0;padding:0;background-color:black;width:400px;height:400px;}
#spaceship{fill:orange; stroke:red;stroke-width:2px;}
</style>
<svg class="world">
    <polygon id="spaceship" points="15,0 0,30 30,30" />
</svg>
<script>
    refresh();
</script>
<script>
var shipSize = {width:30, height:30};
var position = {x:200, y:200};
var moveRate = 9, turnRate = 5, angle = 0;
var spaceship = document.getElementById("spaceship");
function updatePosition(offset){
    var rad = angle * (Math.PI / 180);
    position.x += (Math.sin(rad) * offset);
    position.y -= (Math.cos(rad) * offset);
    if(position.x < 0)
        position.x = 399;
    else if(position.x > 399)
        position.x = 0;
    
    if(position.y < 0)
        position.y = 399;
    else if(position.y > 399)
        position.y = 0;
}
function refresh(){
    var x = position.x - (shipSize.width / 2);
    var y = position.y - (shipSize.height / 2);
    var transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15 " + ")";
    spaceship.setAttribute("transform", transform);
}
</script>

应用：

window.addEventListener("keydown", function(event){
    if(event.preventDefaulted)
        return;
    switch(event.code){
        case "KeyS":
        case "ArrowDown":
            updatePosition(-moveRate);
            break;
        case "KeyW":
        case "ArrowUp":
            updatePosition(moveRate);
            break;
        case "KeyA":
        case "ArrowLeft":
            angle -= turnRate;
            break;
        case "KeyD":
        case "ArrowRight":
            angle += turnRate;
            break;
    }
    refresh();
    event.preventDefault();  // 这样它就不会被处理两次
}, true);
refresh();

repeat属性：是一个只读属性，返回一个布尔值，如果按键被一直按住，返回值为true

txt.addEventListener("keydown", function(event){
    console.log(event.repeat);
},false);

辅助键：键盘事件对象也支持辅助键，有altKey、ctrlKey、shiftKey和metaKey属性（与鼠标事件的辅助键一样）：

function handlerEvent(event){
    var txt = document.getElementById("txt");
    event = event || window.event;
    txt.value += "\n" + event.type;
    txt.value += "\nkeyCode:" + event.keyCode;
    txt.value += "\ncharCode:" + event.charCode;
    var arrKeys = [];
    if(event.shiftKey) arrKeys.push("shift");
    if(event.altKey) arrKeys.push("alt");
    if(event.ctrlKey) arrKeys.push("ctrl");
    txt.value += "\n按钮：" + arrKeys; 
}

getModifierState()方法：

DOM3级还为event对象添加了getModifierState()方法，该方法接收一个参数，即等于Shift、Control、AltGraph或Meta的字符串，表示要检测的辅助键，如果指定的辅助键是活动的，该方法返回true，否则返回false；

if(event.getModifierState){
    console.log(event.getModifierState("Shift"));
}

通过event对象的shiftKey、altKey、ctrlKey和metaKey属性也可以取得类似的属性；IE8及以下不支持此方法；

location属性：DOM3级事件添加了一个名为location的属性，返回一个long型的常量值，表示按下了什么位置的键：DOM_KEY_LOCATION_STANDARD值为0表示默认键盘、DOM_KEY_LOCATION_LEFT值为1表示左侧位置（例如左位的Alt键）、DOM_KEY_LOCATION_RIGHT值为2表示右侧位置（例如右侧的Shift键）、DOM_KEY_LOCATION_NUMPAD值为3表示数字小键盘、DOM_KEY_LOCATION_MOBILE值为4表示移动设备键盘（也就是虚拟键盘）、DOM_KEY_LOCATION_JOYSTICK值为5表示手柄（如控制器）；（其中4和5被废弃了）

console.log(event.location);

location属性可用于keydown和keyup事件，但不能用于keypress事件；IE8及以下和其他低版本的浏览器不支持location属性；低版本的Chrome还支持一个keyLocation等价属性，但该值除了按下数字键盘返回3，其他都返回0，该属性现已废弃；

示例：键盘快捷键的Keymap类：说明：把像PageUp、Alt_Z和ctrl+alt+shift+F5这些按键的标识符映射到Javascript函数，这些函数会作为按键的响应而调用；以javascript对象的形式把按键的绑定传给Keymap()构造函数，在对象中属性名是按键标识符，而属性值是处理程序函数；使用bind()和unbing()方法添加和移除绑定，使用install()方法在HTML元素（通常是document对象）上配置Keymap；通过在元素上注册keydown事件处理程序配置Keymap；每次键被按下，处理程序检查是否有与按键相关的函数，如果有，则调用它；在keydown事件处理程序中如果能使用DOM3级事件的key属性就优先使用它，如果没有，会查找Webkit的keyIdentifier属性然后使用它，否则，使用keyCode属性；保存为Keymmap.js；如：

// 构造函数
function Keymap(bindings){
    this.map = {}; // 定义按键标识符->处理程序映射
    if(bindings){  // 给它复制初始绑定
        for(name in bindings)
        this.bind(name, bindings[name]);
    }
}
// 绑定指定的按键标识符和指定的处理程序
Keymap.prototype.bind = function(key, func){
    this.map[Keymap.normalize(key)] = func;
};
// 删除指定按键标识符的绑定
Keymap.prototype.unbind = function(key){
    delete this.map[Keymap.normalize(key)];
};
// 在指定HTML元素上配置Keymap
Keymap.prototype.install = function(element){
    // 这是事件处理程序
    var keymap = this;
    function handler(event){
        // console.log(event);
        return keymap.dispatch(event, element);
    }
    // 安装
    if(element.addEventListener)
        element.addEventListener("keydown", handler, false);
    else if(element.attachEvent)
        element.attachEvent("onkeydown", handler);
}
// 基于Keymap绑定分派按键事件
Keymap.prototype.dispatch = function(event, element){
    // 开始没有辅助键和键名
    var modifiers = "";
    var keyname = null;
    // 按照标准的小写字母顺序构建辅助键字符串
    if(event.altKey) modifiers += "alt_";
    if(event.ctrlKey) modifiers += "ctrl_";
    if(event.metaKey) modifiers += "meta_";
    if(event.shiftKey) modifiers += "shift_";
    // 如果实现DOM3级规范的key属性，获取keyname很容易
    if(event.key) keyname = event.key;
    // 在Safari和Chrome上用keyIdentifier获取功能键键名
    else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+")
        keyname = event.keyIdentifier;
    // 否则，使用keyCode属性和后面编码到键名的映射
    else keyname = Keymap.keyCodeToKeyName[event.keyCode];
    // 如果不能找出键名，只能返回并忽略这个事件
    if(!keyname) return;
    // 标准的按键id是辅助键加上小写的键名
    var keyid = modifiers + keyname.toLowerCase();
    // 现在查看按键标识符是否绑定了任何东西
    var handler = this.map[keyid];
    if(handler){ // 如果这个键有处理程序，则调用
        // 调用处理程序
        var retval = handler.call(element, event, keyid);
        // 如果处理程序返回false，取消默认行为并阻止冒泡
        if(retval === false){
            if(event.stopPropagation)
                event.stopPropagation();
            else
                event.cancelBubble = true;
            if(event.preventDefault)
                event.preventDefault();
            else
                event.returnValue = false;
        }
        return retval;  // 返回处理程序的返回值
    }
};
// 用于把的按键标识符转换成标准形式的工具函数
// 在非Mac，把meta映射到ctrl
// 在Mac，把"Meta+C"变成"Command+C"，其他都是"Ctrl+C"
Keymap.normalize = function(keyid){
    keyid = keyid.toLowerCase();
    var words = keyid.split(/\s+|[\-+_]/);  // 分割辅助键和键名
    var keyname = words.pop(); // 键名是最后一个
    keyname = Keymap.aliases[keyname] || keyname; // 它是别名吗？
    words.sort();  // 排序剩下的辅助键
    words.push(keyname);  // 添加到序列化名字后面
    return words.join("_");  // 拼接并返回
};
// 把按键的常见别名映射到它们的正式名
Keymap.aliases = {
    "escape": "esc", // 键名使用DOM3级事件的定义和后面的编码到键名的映射
    "delete": "del", // 所有的键和值都必须小写
    "return": "enter",
    "ctrl": "control",
    "space": "spacebar",
    "ins": "insert"
};
Keymap.keyCodeToKeyName = {
    // 使用词或方向键的按键
    8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Control", 18: "Alt",
    19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Spacebar", 33: "PageUp",
    34: "PageDown", 35: "End", 36: "Home", 37: "Left", 38: "Up", 39: "Right",
    40: "Down", 45: "Insert", 46: "Del",
    // 主键盘（非数字小键盘）上的数字键
    48: "0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",
    // 字母按键，注意不区分大小写
    65:"A",66:"B",67:"C",68:"D",69:"E",70:"F",71:"G",72:"H",73:"I",
    74:"J",75:"K",76:"L",77:"M",78:"N",79:"O",80:"P",81:"Q",82:"R",
    83:"S",84:"T",85:"U",86:"V",87:"W",88:"X",89:"Y",90:"Z",
    // 数字小键盘的数字和标点符号按键
    96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9",
    106:"Multiply",107:"Add",109:"Subtract",110:"Decimal",111:"Divide",
    112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",
    118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",
    124:"F13",125:"F14",126:"F15",127:"F16",128:"F17",129:"F18",
    130:"F19",131:"F20",132:"F21",133:"F22",134:"F23",135:"F24",
    59:";",61:"=",186:";",187:"=", 
    188:",",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"
};

应用：

<textarea id="txt"></textarea>
<script>
function fnPageUp(){
    console.log("pageup");
    return false; 
}
function fnArrowUp(){
    console.log("arrowup");
}
function fnEnter(){
    console.log("enter");
    return false;
}
var obj = {"PageUp":fnPageUp, "ArrowUp":fnArrowUp, "Enter": fnEnter};
var km = new Keymap(obj);
var txt = document.getElementById("txt");
km.install(txt);
</script>

文本事件：

文本类事件，只有一个textinput，当在可编辑区域中输入字符时，会触发此事件；

var txt = document.getElementById("txt");
txt.addEventListener("textinput", function(event){
    console.log(event);   // TextEvent
});

但只有IE支持，其他所有浏览器都不支持；但却存在一个不标准的textInput事件，注意Input的第一个字母是大写；

txt.addEventListener("textInput", function(event){
    console.log(event);  // TextEvent
});

但除了Webkit浏览器支持，IE和Firefox不支持textInput事件；

该事件是对keypress的补充，用意是在将文本显示给用户之前拦截文本，也就是在文本插入文本框之前会触发textinput事件；

但是两者有些不同：

任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑元素才能触发textinput事件；

textinput事件只会在用户按下能够输入实际字符的键时才会被触发，而keypress事件则在按下那些能够影响文本显示的键时也会触发（如退格键）；

textinput事件event对象还包含一个data属性，其值就是输入的字符；

EventUtil.addHandler(txtInput, "textinput", function(event){
    event = EventUtil.getEvent(event);
    console.log(event.data);
});

另外，textinput是先于keyup、后于keypress触发，如果在keypress事件中阻止了默认行为，那么textinput事件就有可能不会被触发了，如：

txt.addEventListener("textInput", function(event){
    console.log(event.type);
});
txt.addEventListener("textinput", function(event){
    console.log(event.type);
});
txt.addEventListener("keypress", function(event){
    console.log(event.type);
    event.preventDefault();
})；

textinput事件不是键盘的特定事件，无论通过键盘、剪切和粘贴、拖放等方式，每当发生文本输入时就会触发它；

event对象的inputMethod属性是一组常量值，表示文本输入的方式（也就是所谓的输入源），如：0表示浏览器不确定是怎么输入的、1表示是使用键盘输入、2表示是粘贴进来的、3表示是拖放进来的、4表示是使用IME输入的、5表示是通过在表单中选择某一项输入的、6表示是通过手写输入的、7表示是通过语音输入的、8表示是通过几种方法组合输入的、9表示是通过脚本输入的；

通过这个属性可以确定文本是如何输入到控件中的，但只有IE支持inputMethod属性；

对于键盘输入，data属性通常只保存单个字符，但其他输入源通常可能包含多个字符；对于keypress事件来说，一个keypress事件表示输入的单个字符，其使用keyCode或charCoode属性来保存的，返回的是对应的Unicode编码，因此需要使用String.fromCharCode()方法进行转换，如：

var txt = document.getElementById("txt");
txt.addEventListener("textInput", function(event){
    console.log("textInput:" + event.data);
});
txt.addEventListener("keypress", function(event){
    console.log("keypress:" + String.fromCharCode(event.charCode));
});

可以通过取消textinput、textInput和keypress事件来阻止字符输入，这意味着可以使用这些事件来过滤输入，如：过滤用户输入，保存为InputFilter.js

// HTML代码示例
// 邮政编码：<input id="zip" type="text" data-allowed-chars="0123456789"
//             data-messageid="zipwarn" />
// <span id="zipwarn" style="color:red; visibility:hidden">只支持数字</span>
function inputfilter(){
    console.log("filter");
    // 查找所有<input>元素
    var inputelts = document.getElementsByTagName("input");
    for(var i=0, len = inputelts.length; i<len; i++){
        var elt = inputelts[i];
        // 跳过不是文本域或没有data-allowed-chars属性的元素
        if(elt.type != "text" || !elt.getAttribute("data-allowed-chars"))
            continue;
        // 在input元素上注册事件处理程序
        if(elt.addEventListener){
            elt.addEventListener("keypress", filter, false);
            elt.addEventListener("textInput", filter, false);
            elt.addEventListener("textinput", filter, false);
        }else{
            elt.attachEvent("onkeypress", filter);
        }
    }
    // 处理程序
    function filter(event){
        var e = event || window.event;
        var target = e.target || e.srcElement;
        var text = null;  // 输入的文本
        // 获取输入的字符或文本
        if(e.type === "textinput" || e.type==="textInput" )
            text = e.data;
        else{
            var code = e.charCode || e.keyCode;
            // 如果按下的是功能键，不要过滤
            if(code < 32 ||  // ASCII控制字符
                e.charCode == 0 || // Firefox的功能键
                e.ctrKey || e.altKey)  // 辅助键
                return;
            text = String.fromCharCode(code);
        }
        var allowed = target.getAttribute("data-allowed-chars"); // 合法字符
        var messageid = target.getAttribute("data-messageid");  // 信息元素id
        if(messageid)
            var messageElement = document.getElementById(messageid);
        for(var i=0, len=text.length; i<len; i++){
            var c = text.charAt(i);
            if(allowed.indexOf(c) == -1){
                if(messageElement)
                    messageElement.style.visibility = "visible";
                if(e.preventDefault)
                    e.preventDefault();
                if(e.returnValue)
                    e.returnValue = false;
                return false;
            }
        }
        if(messageElement)
            messageElement.style.visibility = "hidden";
    }
};

应用：

<p><input id="zip" type="text" data-allowed-chars="0123456789"
           data-messageid="zipwarn" />
<span id="zipwarn" style="color:red; visibility:hidden">只支持数字</span></p>
<script>
window.onload = function(){
    inputfilter();
}
</script>

InputEvent事件：

InputEvent类用来构造和字符输入相关的事件对象；

input事件：

当一个 <input>、<select>或<textarea>元素的 value 被修改时，就会触发 input事件；如：
txt.addEventListener("input", function(event){
    console.log(event);  // InputEvent
});

另外，可编辑元素也可添加input事件；

keypress和textinput事件是在新输入的文本真正插入到可编辑区域元素前触发的，所以能够在事件处理程序中取消事件或阻止文本插入；而input事件，其是在文本插入后才触发事件，因此，这个事件不能取消，不能指定其事件对象中的最新文本；如：

姓名：<input type="text" oninput="this.value = this.value.toUpperCase();" />

该事件和文本事件一样，拥有data和isComposing属性；

data属性：只读，返回当前输入的字符串，如果是删除操作，则该值为空字符串；

isComposing属性：只读，返回一个布尔值，表明该事件是在触发compositionstart事件之后且触发 compositionend事件之前触发的，也就是表明当前输入的字符是输入法的输入的；

txt.addEventListener("input", function(event){
    console.log(event.data);
    console.log(event.isComposing);
});

如果更改未插入文本（例如删除字符时），则其可能为空字符串；

inputType属性：表示当前编辑文本的类型，如果是插入文本，值为insertText，如果是Delete删除字符，值为ddeleContentForward，如果是Backspace删除字符，值为deleteContentBackward，如果剪切文本，值为deleteByCut，如果是回车换行，值为insertLineBreak，如果是粘贴输入，值为insertFromPaste，如果是拖入，值为insertFromDrop；

IE虽然支持input事件，但是把它当作普通的Event类型的，因此，它没有data和isComposing属性；

IE8及以下不支持该事件，其提供了一个专用的propertychange事件，可以用来检测文本输入元素的value属性的变化；

如：跨平台：

function forceToUpperCase(element){
    if(typeof element === "string")
        element = document.getElementById(element);
    element.oninput = upcase;
    element.onpropertychange = upcaseOnPropertyChange;
    function upcase(event){
        this.value = this.value.toUpperCase();
    }
    function upcaseOnPropertyChange(event){
        var e = event || window.event;
        if(e.propertyName === "value"){
            // 移除事件处理程序，避免循环调用
            this.onpropertychange = null;
            this.value = this.value.toUpperCase();
            // 再恢复原来的propertychange处理程序
            this.onpropertychange = upcaseOnPropertyChange;
        }
    }
}
forceToUpperCase(document.getElementById("username"));

beforeinput事件：beforeinput 在<input>, <select> 或 <textarea> 的值即将被修改前触发，这个事件也可以在 contenteditable 被设置为 true 的元素和打开 designMode 后的任何元素上被触发；

var txt = document.getElementById("txt");
txt.addEventListener("beforeinput", function(event){
    console.log(event.type);
});
txt.addEventListener("input", function(event){
    console.log(event.type);
});

该事件是可以取消的，如果取消，input事件就不会被触发；

change事件：当用户更改<input>、<select>和<textarea>元素的值并提交这个更改时，change事件就是触发；和 input事件不一样的是，change事件并不是每次元素的value改变时都会触发；

该事件不可被取消；该事件属于Event类；

在线咨询

上一篇：产品经理懂点技术：前后端是如何“分家”的？
下一篇：程序员应该先学哪种编程语言？-答案不是PHP

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 键盘事件实例

您的项目需求