当前位置: 首页 > Web前端 > HTML5

限制input输入的方法(监听键盘事件)

时间:2023-04-05 22:50:53 HTML5

问题:input元素只允许输入数字,汉字,字母等实现思路:js监听键盘事件,通过正则匹配或者键码取值比较,将不符合验证的值替换掉或者设置事件对象的returnValue为false。键盘事件三种键盘事件:keydown,keypress,keyup事件触发顺序:keydown->keypress->keyupkeydown:当用户按下任意键时触发,如果用户按住不放,则重复触发该事件。keypress:当用户按下字符键时触发,如果用户按下字符键,该事件会重复触发。但功能键可能不会触发此事件。keyup:当用户释放按键时触发。键盘事件的触发过程具体如下:当用户按下键盘上的某个字符键时,会先触发keydown事件,然后是keypress事件,最后是keyup事件。其中keydown和keypress事件在文本框变化之前触发;并且在文本框更改后触发keyup。如果用户按下一个键并保持按下,keydown和keypress事件将被重复触发。当用户按下功能键时,首先触发keydown事件,然后触发keyup事件。如果用户按下并按住某个键,则会重复触发keydown。在keyup事件中,不能阻止浏览器的默认事件,因为当按键被按下时,浏览器的默认行为已经完成,即文本被输入文本框(虽然此时并没有显示),是否此时无论是preventDefault还是returnValue=false,都不能阻止在文本框中输入文本的行为。如果你想阻止默认行为,你必须在按下或按键期间阻止它。键盘按键分类键盘中的按键分为字符键(可打印)和功能键(不可打印)。系统功能键包括:Esc、Tab、CapsLock、Shift、Ctrl、Alt、Enter、Backspace、PrintScreen、ScrollLock、PauseBreak、Insert、Delete、Home、End、PageUp、PageDown、F1~12、NumLock、方向键。keydown和keyup都可以有效拦截系统功能键,只是事件拦截位置不同;keypress事件不能正常响应系统功能键(如:back、delete等)和中文输入法,keypress响应系统功能键总结:Firefox:支持Esc、Enter、Backspace、PauseBreak、Insert、Delete、Home、End、PageUp、PageDown、F1~F12、方向键,支持方向键Chrome、Oprea、Safari:支持Enter,不支持方向键IE:支持Esc、Enter,不支持方向键中文输入法(各浏览器表现不一致):firfox:输入触发keydown,回车确认input触发keyupchrome:输入触发keydown,keyup,回车确认输入仅触发keydownIE:输入触发keydown,keyup,回车确认inputtriggerskeydown,keyupSafari:inputtriggerskeydown,keyup,pressentertoconfirminputtriggerskeydown,keyup,entertoconfirminputtriggerskeydown,keyup键盘事件的值keyCode(键码):是字母或数字对应的ASCII码。当keydown、keypress、keyup事件发生时,可以在事件对象中获取。在FF和Opera中,分号键按下时,keyCode值为59,而IE、Chrome、Safari返回186。在Safari3之前的版本中,上下左右箭头和向上翻页(PageUp)、向下翻页(PageDown))键返回一个大于63000的值其中:charCode(字符码):是按下的字符键对应的ASCII码。在keypress事件中,FF、Chrome、Safari的事件对象都支持一个charCode属性,当按下非字符键或发生keydown、keyup事件时,该属性值为0;IE和Opera将ASCII字符键存储在keyCode编码中。因此,如果想跨浏览器获取字符编码,代码如下://获取字符编码,可以使用String.fromCharCode()转换为实际字符。vargetCharCode=function(event){varcharcode=event.charCode;if(typeofcharcode==="number"&&charcode!=0){返回charcode;}else{//中文输入法下keyCode===229||keyCode===197(Opera)returnevent.keyCode;}};事件值兼容性keydown和keyup具有相同的性能,keypress不同于两者。在keydown和keyup事件中,字符键和功能键可以获得keyCode、witch值,但是在charCode=0keypress事件中,字符键可以获得keyCode、witch和charCode值。在此浏览器中,功能键可能不会触发此事件。keypress事件的keyCode对字母大小写敏感,而keydown和keyup事件不敏感。keypress事件的which值无法区分主键盘上的数字键和附属键盘上的数字键。是的,keydown和keyup的哪个值对主键盘和附加键盘的数字键敏感。IE(ie9以下,即11正常),keydown和keyup事件中只有一个属性keyCode属性,keycode属性表示你按下的那个键(也叫virtualkeycode);在keypress事件中,keyCode属性指的是你键入的键Character(字符编码)常见限制类型只能输入或粘贴数字只输入数字(不闪烁)57))event.returnValue=false"/>只输入数字和小数点可以输入或粘贴粘贴英文字母和数字,不能粘贴中文.replace(/[^\w\.\/]/g,'')">只能输入或粘贴中文只能输入或粘贴英文简单禁止汉字输入只读文本框keyCode对应表格字母(大小写):[A-Z]->[65-90]数字:[0-9]->[48-57]Numpadkeys:[0-9]->[96-105]Ffunctionkeys:[F1-F12]->[112-123]keyCod已从网络标准中删除,尽管一些浏览器目前仍然支持,但将来可能会停止,请尽量不要使用此功能你应该使用KeyboardEvent.code。不幸的是,有些浏览器仍然没有实现它,所以你在使用之前要小心it,确认你使用的是所有目标浏览器都支持的,ASCII码表信息在计算机上是用二进制表示的,人们很难理解,所以计算机配备输入输出设备的主要目的这些设备的主要目的是在这些设备上以人类可读的形式显示信息,供人们阅读和理解。为了保证人与设备、设备与计算机之间正确的信息交换,人编制的统一这就是ASCII(AmericanStandardCodeforInformationInterchange)表,它的全称是“AmericanStandardCodeforInformationInterchange”。字符编码字符编码字符编码字符编码nul0sp32@64'96soh1!33A65a97stx2"34B66b98etx3#35C67c99eot4$36D68d100enq5%37E69e101ack6&38F70f102bel7`39G71g103bs8(40H72h104ht9)41I73i105nl10*42J74j106vt11+43K75k107ff12,44L76l108er13-45M77m109so14.46N78n110si15/47O79o111dle16048P80p112dc117149Q81q113dc218250R82r114dc319351S83s115dc420452T84t116nak21553U85u117syn22654V86v118etb23755W87w119can24856X88x120em25957Y89y121sub26:58Z90z122esc27;59[91{123fs28<60\92\124gs29=61]93}125re30>62^94~126us31?63_95del127ReferencelinkMDNKeyboardEvent.keyCodeKeyboardeventskeydown,keypress,keyupEssaysummary(excerpt)