JavaScript KeyCode与CharCode
问题:
- 限制HTMLinput中的允许字符仅限AZ AZ。
- 对于业务需求,这需要在KeyPress上完成,以便字符不被允许甚至出现在input中。
- 标签,input,箭头,退格,移位都是允许的。 用户必须能够自由移入和移出文本框,删除字符等。
这是我的代码的起点…
var keyCode = (e.keyCode ? e.keyCode : e.which);
但是,我在keyCode中获得的每个值都不对应于我在networking上看到的任何字符图表。 例如,字符“h”给了我一个104的返回码。
KeyCode与CharCode不同吗? 哪些代码包含控制字符? 我需要转换吗?
我怎样才能限制inputAZ AZ,并允许在JavaScript中需要的键?
所有问题的答案都可以在下一页find。
…总之:
- 唯一能够可靠获取字符信息的事件(而不是关键代码信息)是
keypress
事件。 - 在
keypress
事件中,除IE <= 8之外的所有浏览器都将字符代码存储在事件的which
属性中。 大多数但不是所有这些浏览器也将字符代码存储在charCode
属性中。 - 在
keypress
事件中,IE <= 8将字符代码存储在keyCode
属性中。
这意味着要获取与按键相对应的字符代码,以下方法无处不在,假设按键事件对象存储在名为e
的variables中:
var charCode = (typeof e.which == "number") ? e.which : e.keyCode
这通常会返回一个字符代码,其中一个存在,否则返回0。 有几种情况下,如果您不应该获得非零值:
- 在Opera <10.50中插入 , 删除 , 首页和结束
- 在最近版本的Konqueror中,用于非字符键。
第一个问题的解决方法是有一点涉及,并需要使用keydown
事件。
好悲伤 根据Mozilla的API文档,KeyboardEvent [key,char,keyCode,charCode,which]都被弃用或者当前有未解决的错误 – https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent 。 即使是JQuery在这一个上传递了这个压力,并让用户把它变成https://api.jquery.com/keydown/ 。
实际上,104是小写字母“h”的ASCII码。 要获得input字符的ASCII码,你可以使用e.which || e.keyCode
e.which || e.keyCode
,您不必担心按住键,因为键入的文本,按键是在所有浏览器(根据优秀的http://unixpapa.com/js/key.html )自动重复。
所以你真正需要的是:
<input id="textbox"> <script type="text/javascript"> document.getElementById('textbox').onkeypress = function(e){ var c = e.which || e.keyCode; if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127)) return false; }; </script>
试试看: http : //jsfiddle.net/wcDCJ/1/
(ASCII代码来自http://en.wikipedia.org/wiki/Ascii )
onKeyPress具有不同的大写和小写字母代码。 你可能会发现,打开大写锁,然后input你的信将给你你想要的代码
onKeyUp和onKeyDown具有大写和小写字母相同的字符代码。 它会推荐使用onKeyUp,因为它离onKeyPress最近
/ *你不会在keypress上得到一个非打印键的keyCode,为什么不在keydown上捕获它们呢? * /
function passkeycode(e){ e= e || window.event; var xtrakeys={ k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock', k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right', k40: 'Ar Down', k45: 'Insert', k46: 'Delete' }, kc= e.keyCode; if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true; else return false; } inputelement.onkeydown=passkeycode;
kc> 64 && kc <91 // a-zA-Z
xtrakeys ['k'+ integer])定义了允许的特殊键码
这是标记示例:
<form id="formID"> <input type="text" id="filteredInput"> <input type="text" id="anotherInput"> </form>
下面的逻辑可以用来捕获键盘input(在这种情况下,通过jQuery文档准备包装)。
它可能读得有点愚蠢,但基本上,我检查我想要允许的一切(在你的情况下,字母A到Z不区分大小写)并且什么都不做 。 换句话说,默认行为是允许的,但是除alpha之外的任何input都被阻止。
标准的键盘导航,例如方向键,Home,End,Tab,Backspace,Delete等被检查和允许。
注:此代码最初是为了满足只允许字母数字值(A – Z,a – z,0 – 9)的用户input而编写的,并且我将这些行保留为注释。
<script> jQuery( document ).ready( function() { // keydown is used to filter input jQuery( "#formID input" ).keydown( function( e ) { var _key = e.which , _keyCode = e.keyCode , _shifted = e.shiftKey , _altKey = e.altKey , _controlKey = e.ctrlKey ; //console.log( _key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey ); if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) { if( // BACK, TAB ( _key === 8 || _key === 9 ) // normal keyboard nav ){} else if( // END, HOME, LEFT, UP, RIGHT, DOWN ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 ) // normal keyboard nav ){} else if( // DELETE ( _key === 46 ) // normal keyboard nav ){} else if( ( _key >= 65 && _key <= 90 ) // a- z //( _key >= 48 && _key <= 57 && _shifted !== true ) || // 0 - 9 (unshifted) //( _key >= 65 && _key <= 90 ) || // a- z //( _key >= 96 && _key <= 105 ) // number pad 0- 9 ){} else { e.preventDefault(); } } }); }); </script>
我认为keyCode返回ASCII键值,Ascii-104是h。
Charcode与另一个在某些浏览器中使用的替代方法相同。
这里是一个crssbrowser例子的文章: http ://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html
我认为你完全采取了错误的做法。 感觉如何?
<input id="test"> <script type="text/javascript"> var aToZ = function(el){ if(this.value.match(/[^a-zA-Z]/)){ this.value = this.value.replace(/[^a-zA-Z]+/, '') } } document.getElementById("test").onkeyup = aToZ </script>
另外,不要忘记重复检查服务器端。