为什么 keydown 和 keypress 提供不同的“哪个”值？

Question

编辑澄清——链接到的问题没有回答问题 我在这里问，因为它仍然描述了不 充分指定哪个更正确使用，哪个更 可靠，更国际友好，最能 容易地从按下的那些键中提供键和值来获取 可打印和不可打印字符。最明白当每个 事件触发，但试图从/或获取可操作的数据， 尤其是在另一个问题中指出，使用它是不好的形式 在这个特定用例的例子中，一个更好的描述 这些功能将有所帮助。非常感谢您的 对学习和理解的贡献。

我必须同时使用 keypress 和 keydown 函数来以可靠的方式为我正在创建的程序捕获键盘事件。我担心当我开始涉足国际键盘时，必要的解决方案必须非常富有想象力。更多地了解这两个函数的实际行为方式肯定会澄清我的进一步进展以及其他许多进展。对该主题的研究已经产生了许多不同的方法，并且没有那么明确的理解易于使用。主要是一堆不同的黑客。

我最大的问题是区分普通字符“abc”和“123”，以及“enter”或“backspace”等不可打印的字符。句号或小数点是它自己的动物。我的代码可以正常工作，但是当我在正常输入字母和数字的基础上为几种不同的国际键盘布局提供 100 多个可编程键盘快捷键时，我可能会遇到麻烦。

对 keypress 和 keydown 以及可能的 keyup 的区别的一个很好的解释将受到许多人的极大赞赏。

非常感谢您的帮助！

此代码有效，但更好的理解可能会改变其形式。

keypress 主要捕获可打印的字符

keydown 捕获不可打印的键，例如回车键和退格键

.keypress(function(key) 
{
/*     $(".temp").append(key.shiftKey + ' -- ' + key.which + ': ' + key.key + '<br>'); */
    console.log(key.shiftKey + ' -- ' + key.which + ': ' + String.fromCharCode(key.which));
    KeyBindHandler(key);
})
.keydown(function(key) 
{
    console.log(key.shiftKey + ' -- ' + key.which + ': ' + String.fromCharCode(key.which));
    if ($.inArray(key.which, [8, 13, 46, 112, 113, 114, 115, 116, 110, 190]) > -1)
        KeyBindHandler(key);
})

function KeyBindHandler(key)
{
    key.preventDefault();

    if (key.which == 8 || key.which == 46)         // backspace delete
        BackSpace();
    else if (key.which == 13)                      // enter keys
        Enter();
    else if (key.which == 110 || key.which == 190) // period or decimal
        ButtonHandler($('#Decimal'));
    else if ($.inArray(key.which, [40, 41, 42, 43, 45, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]) > -1)
    {
        if (key.shiftKey)
        {
            switch (key.which)
            {
                case 40:  // (
                    ButtonHandler($('#Open_peren'));
                    break;
                case 41:  // )
                    ButtonHandler($('#Close_peren'));
                    break;
                case 45: // shift and key minus posneg
                    math_io.PosNegHandler();
                    $(".io_in").html(math_io.Display());
                    break;
            }
        }
        else              // operands and numbers
        {
            switch (key.which)
            {
                case 47:
                    ButtonHandler($('#Division'));
                    break;
                case 42:
                    ButtonHandler($('#Multiplication'));
                    break;
                case 45:
                    ButtonHandler($('#Subtraction'));
                    break;
                case 43:
                    ButtonHandler($('#Addition'));
                    break;
                default:
                    ButtonHandler($('#' + String.fromCharCode(key.which)));
            }

        }
    }
    else                       // F1 to F5
    {
        switch (key.which) 
        {
            case 112:
                NavButtonHandler($('#Standard'));
                break;
            case 113:
                NavButtonHandler($('#Advanced'));
                break;
            case 114:
                NavButtonHandler($('#Scientific'));
                break;
            case 115:
                NavButtonHandler($('#Advanced_Scientific'));
                break;
            case 116:
                NavButtonHandler($('#Graphing'));
                break;
        }
    }
}

Answer 1

key.key是上帝派来的。两天，大概 50 种不同的浏览器 选项卡，反复试验，而我一直需要的是 key.key。任何人读到这里，你只需要切换key.key 通过 jQuery 或 KeyboardEvent.key 通过标准 JavaScript 获取 准确的keyDown 值！

我用下面的代码替换了上面的代码，只使用了 keydown 事件。我必须说，两者都有明显的改进 美学和功能。我希望这可以帮助很多人 那些在这个问题上苦苦挣扎的人。非常感谢大家 这对我有帮助！

function KeyBindHandler(key)
{
    key.preventDefault();

    var search_key = '';

    if (key.ctrlKey) search_key += 'Control_';
    else if (key.altKey) search_key += 'Alt_';
    else if (key.shiftKey) search_key += 'Shift_';
    else if (key.metaKey) search_key += 'Meta_';
    else search_key += 'NoMod_';

    // more to be added, account for symbol keys that are problematic in button or other id's
    search_key += function()
    {
        switch (key.key)
        {
            case '(':
                return '9';
            case ')':
                return '0';
            case '/':
                return 'Divide';
            case '*':
                return 'Multiply';
            case '-':
                return key.shiftKey ? 'Posneg' : 'Subtract';
            case '+':
                return 'Add';
            case '.':
                return 'Decimal';
            default:
                return key.key;
        }
    }();

    switch (search_key)
    {
        case 'NoMod_F1':
        case 'NoMod_F2':
        case 'NoMod_F3':
        case 'NoMod_F4':
        case 'NoMod_F5':
            NavButtonHandler($('#' + search_key)); // F key handler
            break;
        case 'NoMod_Enter':
            Enter(); // Enter handler
            break;
        case 'NoMod_Backspace':
        case 'NoMod_Delete':
            BackSpace(); // Backspace
            break;

        case 'Shift_Posneg': // positive negative handler
        case 'Shift_9': // (
        case 'Shift_0': // )

        case 'NoMod_0':
        case 'NoMod_1':
        case 'NoMod_2':
        case 'NoMod_3':
        case 'NoMod_4':
        case 'NoMod_5':
        case 'NoMod_6':
        case 'NoMod_7':
        case 'NoMod_8':
        case 'NoMod_9':

        case 'NoMod_Decimal':
        case 'NoMod_Divide': // operands
        case 'NoMod_Multiply':
        case 'NoMod_Subtract':
        case 'NoMod_Add':
            ButtonHandler($('#' + search_key));
            break;
        default:
            //nothing yet
    }
}