JavaScript KeyCode与CharCode

JavaScript KeyCode vs CharCode

问题：

将HTML输入中允许的字符限制为a-z A-Z。
对于业务需求，这需要在KeyPress上完成，以便甚至不允许字符甚至出现在输入中。
Tab，Enter，箭头，退格键，Shift键都是允许的。用户必须能够自由地移入和移出文本框，删除字符等。

这是我的代码的起点...

1	var keyCode = (e.keyCode ? e.keyCode : e.which);

但是，我在keyCode中获得的每个值都不对应于我在网络上看到的任何字符表。例如，字符" h"的返回码为104。

KeyCode与CharCode是否不同？哪个代码包含控制字符？我需要转换吗？

如何将输入限制为a-z A-Z，并允许JavaScript中需要的键？

相关讨论

您可以在下一页找到所有问题的答案。

...但总而言之：

keypress事件是唯一可以从中可靠地获取字符信息(与键码信息相对)的事件。
在keypress事件中，除IE <= 8外的所有浏览器都将字符代码存储在事件的which属性中。这些浏览器中的大多数(但不是全部)也将字符代码存储在charCode属性中。
在keypress事件中，IE <= 8将字符代码存储在keyCode属性中。

这意味着要获取与按键对应的字符代码，假设按键事件对象存储在名为e的变量中，则以下代码将在任何地方都可以使用：

1	var charCode = (typeof e.which =="number") ? e.which : e.keyCode

通常，这将返回一个字符代码，其中一个存在，否则为0。在某些情况下，您不应获得非零值：

在Opera中，对于键Insert，Delete，Home和End，<10.50
在Konqueror的最新版本中，用于非字符密钥。

第一个问题的解决方法有点复杂，并且还需要使用keydown事件。

相关讨论

真是的根据Mozilla的API文档-https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent，KeyboardEvent.[key、c??har、keyCode、charCode，其中]均已弃用或当前存在未解决的错误。甚至JQuery都为此付出了代价，并让用户知道了https://api.jquery.com/keydown/。

实际上，104是小写字母" h"的ASCII码。要获得onkeypress上键入字符的ASCII码，您可以使用e.which || e.keyCode，并且您不必担心按下键，因为对于键入的文本，keypress在所有浏览器中都会自动重复(根据出色的http ：//unixpapa.com/js/key.html)。

因此，您真正需要的是：

1
2
3
4
5
6
7
8

<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;
};

试试看：http://jsfiddle.net/wcDCJ/1/

(ASCII代码来自http://en.wikipedia.org/wiki/Ascii)

onKeyPress对于大写和小写字母具有不同的代码。您可能会发现打开大写锁定然后输入字母会得到所需的代码

onKeyUp和onKeyDown具有相同的大写和小写字母字符代码。建议使用onKeyUp，因为它最接近onKeyPress

相关讨论

这是标记示例：

1
2
3
4

以下逻辑可用于捕获键盘输入(在这种情况下，通过jQuery文档就绪包装器)。

它可能看起来有点愚蠢，但基本上，我会检查我想允许的所有内容(在您的情况下，字母A到Z不区分大小写)，什么也不做。换句话说，允许使用默认操作，但是将阻止除alpha之外的任何输入。

检查并允许使用标准键盘导航，例如箭头键，Home，End，Tab，Backspace，Delete等。

注意：编写此代码最初是为了满足用户输入，仅允许输入字母数字值(A-Z，a-z，0-9)，而我保留了这些行作为注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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();
}
}

});
});

/ *
对于非打印键，您不会在按键上获得keyCode，
为什么不通过keydown捕获它们呢？
* /

1
2
3
4
5
6
7
8
9
10
11
12
13

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])定义允许的特殊键码

我认为您完全采用了错误的方法。怎么样：

1
2
3
4
5
6
7
8
9

<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

另外，也不要忘记重复检查服务器端。

相关讨论

我认为keyCode返回ASCII密钥值，Ascii-104为h。

http://www.asciitable.com/

如另一个答案中所述，字符码是某些浏览器中使用的替代方法。

这是带有crssbrowser示例的文章：http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html

相关讨论