keyboard三个参数（KeyboardEvent键盘事件和TextEvent文本事件-王唯）

下面希望有你要的答案，我们一起来看看吧!keyboard三个参数本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

keyboard三个参数?本内容是《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 ></textarea><textarea ></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
$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：Tabvar 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));}

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

字符编码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;elsereturn 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();elsereturn 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();});

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

所有浏览器都支持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)

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

应用：

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元素上配置KeymapKeymap.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 = modifierskeyname.toLowerCase();// 现在查看按键标识符是否绑定了任何东西var handler = this.map[keyid];if(handler){ // 如果这个键有处理程序，则调用// 调用处理程序var retval = handler.call(element, event, keyid);// 如果处理程序返回false，取消默认行为并阻止冒泡if(retval === false){if(event.stopPropagation)event.stopPropagation();elseevent.cancelBubble = true;if(event.preventDefault)event.preventDefault();elseevent.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 ></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代码示例// 邮政编码：<inputtype="text" data-allowed-chars="0123456789"//data-message />// <span>只支持数字</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");// 信息元素idif(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><inputtype="text" data-allowed-chars="0123456789" data-message /><span>只支持数字</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属性的变化；

如：跨平台：

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"/><br/><p ></p><script>var txt = document.getElementById("txt");txt.addEventListener("change", function(event){var info = document.getElementById("info");info.innerHTML = event.target.value;});</script>