本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习，我来为大家科普一下关于keyboard三个参数?下面希望有你要的答案，我们一起来看看吧!
keyboard三个参数
本内容是《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
- Alt 18
- 暂停/中断（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-9 96-105
- 数字小键盘 107
- 数字小键盘-及大键盘的- 109
- 数字小键盘. 110
- 数字小键盘/ 111
- F1-F12 112-123
- 数字锁（Num Lock） 144
- 滚动锁（Scroll Lock） 145
- 分号 FF为59，其他为186
- 等于（=） 187
- 小于（或逗号） 188
- 减号（-） 189
- 大于（或句号） 190
- 正斜杠 191
- 沉音符（`） 192
- 等于 61
- 左方括号 219
- 反斜杠 220
- 右方括号 221
- 单引号 222
- Fn 255
注：在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-9 48-57
- A-Z 65-90
- a-z 97-122
- 空格 32
- 波浪符 126
- 感叹号 33
- @ 64
- # 35
- $ 36
- % 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值
- ESC Escape
- 数字0-9 Digit0-Digit9
- Minus "Minus"
- Equal "Equal"
- Backspace "Backspace"
- Tab "Tab"
- A-Z KeyA-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"
- LaunchApp1 LaunchApp1"
- 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类；
<input type="text" id="txt" /><br/>
<p id="info"></p>
<script>
var txt = document.getElementById("txt");
txt.addEventListener("change", function(event){
var info = document.getElementById("info");
info.innerHTML = event.target.value;
});
</script>
