如何通过按键访问 keyup 中的事件答案

【问题标题】：How to get acess to event in keyup through keypress如何通过按键访问 keyup 中的事件
【发布时间】：2018-12-27 07:17:39
【问题描述】：

这个问题看起来很奇怪，但让我告诉你这个故事：

您可能知道从keyup 获得的e.keycode 与keypress 中的e.keyCode 不同，特别是在涉及双语情况时。

例如，当键盘语言是波斯语并且我按下 A 时，按键上的 e.keyCode 返回 1588 而 keyup 上的 e.keyCode 返回 65。

我在处理按键时需要访问 keyup 提供的 e.keycode，我使用了 data()，但是设置值有延迟，如下所示：

$("#textBox").on("keyup", function(e){
   var keycode = e.keyCode;
   $(this).data('code-on-keyup', keycode);
}) 

$("#textBox").on("keypress", function(e){
   var keycodeOnKeypress = e.keyCode,
       keycodeOnKeyup = $(this).data('code-on-keyup');
   console.log(keycodeOnKeypress, keycodeOnKeyup);
});

我第一次得到undefined for keycodeOnKeyup，下一次我得到前一步生成的键码。

您可能会建议使用setTimeout() 进行按键，但听起来不太好，我不能将其作为参数发送吗？

你能建议我一种访问它的方法吗？

更新：感谢@Amadan，这比我想象的要容易，我应该使用keydown 而不是keyup：

$("#textBox").on("keydown", function(e){
   var keycode = e.keyCode;
   $(this).data('code-on-keydown', keycode);
}) 

$("#textBox").on("keypress", function(e){
   var keycodeOnKeypress = e.keyCode,
       keycodeOnKeydown = $(this).data('code-on-keydown');
   console.log(keycodeOnKeypress, keycodeOnKeydown);
});

【问题讨论】：

“我在处理按键时需要访问 keyup 提供的 e.keycode” 为什么？ 为什么不使用并对 keypress 事件对象中的值制定逻辑？
不管为什么，你知道，有需要。我正在创建一个 JavaScript 文件来控制输入的值，想象你输入了几秒钟，过了一会儿你看看显示屏，你发现你的键盘语言是另一种语言，我正在控制用户正在输入的内容并更改它而无需更改键盘语言。
keyup 发送之后 keypress。在keyup 之前甚至可以有多个keypress，您需要一台时间旅行机器才能在相应的keypress 处理程序中使用keyup 事件数据。确定不能使用keydown 代替keyup？
@2oppin 是正确的，但实际上您的代码也可以正常工作。 “我第一次得到未定义的 keycodeOnKeyup 和下一次我从前一步生成的键码。” - 这是因为 keypress 事件发生在 keyup 事件之前。基本上不可能将某些东西从keyup 传递到keypress，因为一个发生在另一个之前......

标签： javascript jquery

【解决方案1】：

$( document ).ready(function() {

    var theText = $("#theText");
    var theOutputText = ("#theOutputText");
    var theOutputKeyPress = ("#theOutputKeyPress");
    var theOutputKeyDown = ("#theOutputKeyDown");
    var theOutputKeyUp = ("#theOutputKeyUp");
    var theOutputFocusOut = ("#theOutputFocusOut");

    

    theText.keypress(function (event) {
      console.log('keypress');
     keyReport(event, theOutputKeyPress);
      theText.keyup(function (event) {
console.log('keyup');
      keyReport(event, theOutputKeyUp);
    });
    });


   

  

 

    function keyReport(event, output) {
        // catch enter key = submit (Safari on iPhone=10)
        if (event.which == 10 || event.which == 13) {
            event.preventDefault();
        }
        // show event.which
      console.log("Event\t" +event.which + "\tkeyCode\t" + event.keyCode);
        // report invisible keys  
        switch (event.which) {
            case 0:
                output.append("event.which not sure");
                break;
            case 13:
                output.append(" Enter");
                break;
            case 27:
                output.append(" Escape");
                break;
            case 35:
                output.append(" End");
                break;
            case 36:
                output.append(" Home");
                break;
        }
        // show field content
       console.log(theText.val());
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
    <fieldset>
        <label for="theText">Enter some text</label>
        <input id="theText" type="text" />
    </fieldset>
</form>

【讨论】：

这看起来会在每个按键事件上添加一个新的事件监听器...
你可以运行它。

【解决方案2】：

正如您可能读到的那样，keyCode 属性已被弃用，要克服这个问题，您可以使用“key”属性：

eventObject.key.charCodeAt(0)

所以你的代码可能是这样的

$("#textBox").on("keyup", function(e){
   var keycode = e.originalEvent.key.charCodeAt(0);
   $(this).data('code-on-keyup', keycode);
})

$("#textBox").on("keypress", function(e){
   var keycodeOnKeypress = e.originalEvent.key.charCodeAt(0),
       keycodeOnKeyup = $(this).data('code-on-keyup');
   console.log(keycodeOnKeypress, keycodeOnKeyup);
});

【讨论】：