为什么 keydown 和 keypress 提供不同的 "which" 值？

Question

Edit to clarify -- The linked to question does not answer the question I am asking here as it still describes solutions that do not adequately specify which is more correct to use, which is more reliable, which is more internationally friendly, and which can most readily provide the keys and values from those keys pressed to get both printable and non-printable characters. Most understand when each event fires, but attempting to get actionable data from either/or, especially as stated in that other question that it is bad form to use both in the instance of this particular use case, a better description of these functions would help. Thank you very much for your contribution toward learning and understanding.

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

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

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

非常感谢您的帮助！

这段代码有效，但更好的理解可能会改变它的形式。

keypress catches mainly printable chars

keydown catches non printable keys such as enter and backspace

.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 值！

I replaced the above code with the following code using only the keydown event. A definite improvement, I must say, in both aesthetics and functionality. I hope this helps a whole lot of people that were struggling with this very issue. Thank you so much for all that assisted me!

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

为什么 keydown 和 keypress 提供不同的 "which" 值？

Why does keydown and keypress provide different "which" values?

javascript

jquery

keypress

keydown