javascript - JavaScript KeyCode 与 CharCode

Question

问题：

将 HTML 输入中允许的字符限制为仅 az AZ。
对于业务需求，这需要在 KeyPress 上完成，以便字符甚至不允许出现在输入中。
制表符、回车、箭头、退格、移位都是允许的。用户必须能够自由地移入和移出文本框，删除字符等。

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

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

但是，我在keyCode中获得的每个值都与我在网上看到的任何字符图表都不对应。例如，字符“h”给了我一个返回码 104。

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

如何将输入限制为 az AZ 并允许在 JavaScript 中使用我需要的键？

score 70 · Accepted Answer

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

...但总而言之：

唯一可以可靠地获取字符信息（与键码信息相反）的事件是keypress事件。
在该keypress事件中，除 IE <= 8 之外的所有浏览器都将字符代码存储在事件的which属性中。大多数但不是所有这些浏览器也将字符代码存储在charCode属性中。
在这种情况keypress下，IE <= 8 将字符代码存储在keyCode属性中。

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

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

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

在 Opera < 10.50 中，键Insert、、和DeleteHomeEnd
在 Konqueror 的最新版本中，用于非字符键。

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

score 10 · Accepted Answer

好伤心。KeyboardEvent.[key, char, keyCode, charCode, which] 根据 Mozilla 的 API 文档 - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent均已弃用或当前存在突出的错误。甚至 JQuery 都在这个问题上推卸责任，让用户弄清楚https://api.jquery.com/keydown/。

score 5 · Accepted Answer

实际上，104 是小写字母“h”的 ASCII 码。要获取键入字符 onkeypress 的 ASCII 码，您只需使用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）

score 2 · Accepted Answer

onKeyPress 有不同的大小写字母代码。你可能会发现打开大写锁定然后输入你的字母会给你你期望的代码

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

score 0 · Accepted Answer

/* 对于非打印键，您不会在 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]) 定义允许的特殊键码

score 0 · Accepted Answer

这是示例标记：

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

以下逻辑可用于捕获键盘输入（在本例中，通过 jQuery 文档就绪包装器）。

它可能读起来有点傻，但基本上，我检查我想要允许的所有内容（在你的情况下，字母 A 到 Z 不区分大小写）并且什么都不做。换句话说，默认操作是允许的，但除了 alpha 之外的任何输入都被阻止。

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

注意：此代码最初是为了满足用户输入，只允许字母数字值（A - Z、a - z、0 - 9），我将这些行原样保留为注释。

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

score -1 · Accepted Answer

我认为 keyCode 返回 ASCII 键值，Ascii-104 是 h。

http://www.asciitable.com/

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

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

score -1 · Accepted Answer

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

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

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

javascript - JavaScript KeyCode 与 CharCode

8 回答 8

Related

Reference