Muhammad Musavi
Muhammad Musavi

Reputation: 2696

How to get acess to event in keyup through keypress

The question seems weird but let me tell you the story:

As you might know e.keycode gained from keyup differs from e.keyCode in keypress specially when its about bilingual cases.

For instance when the keyboard language is Persian and I press A, e.keyCode on key press returns 1588 while e.keyCode on keyup returns 65.

I need to get access to e.keycode offered by keyup when I'm handling keypress, I used data(), but there is a delay to value be set, something like following:

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

I get undefined for keycodeOnKeyup at the first time and the next time I get keycode generated from one step before.

You might suggest to use setTimeout() for keypress but it doesn't sound good, can't I send it as a parameter?

would you suggest me a method to get access to it?

Update: Thanks to @Amadan, that was easier that what I thought, I should have used keydown instead of 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);
});

Upvotes: 1

Views: 760

Answers (2)

I_Al-thamary
I_Al-thamary

Reputation: 3993

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

Upvotes: 1

2oppin
2oppin

Reputation: 1991

As you might read keyCode property is deprecated, to overcome this you can use "key" property:

eventObject.key.charCodeAt(0)

So your code might be like

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

Upvotes: 0

Related Questions