Search code examples
androidjquerygoogle-chromejquery-mobile

Android Chrome - Keypress event is not returning any key data (jQuery)?


It's been well documented that Chrome in Android doesn't support keydown and keyup events. I'm using jQuery to attach an event listener to a text area like this:

$textarea.on('keyup', function(e) {
    alert(e.key);
}

also tried:

$textarea.on('keydown', function(e) {
    alert(e.key);
}

$this is the text area. The event doesn't return anything useful. Check out the event object:

Object
   altKey: false
   bubbles: true
   cancelable: true
   char: undefined
   charCode: 0
   ctrlKey: false
   currentTarget: HTMLTextAreaElement
   data: undefined
   delegateTarget: HTMLTextAreaElement
   eventPhase: 2
   handleObj: Object
   isDefaultPrevented: function returnFalse() {
   jQuery21102996875715907663: true
   key: undefined
   keyCode: 0
   metaKey: false
   originalEvent: KeyboardEvent
   relatedTarget: undefined
   shiftKey: false
   target: HTMLTextAreaElement
   timeStamp: 1412092745055
   type: "keydown"
   view: Window
   which: 0
__proto__: —

Notice how any of the key values are not defined. This was for simply tapping the letter "A". Is there something I'm doing wrong?

Does anyone know if there is a work around for this? I'm using jQuery Mobile 1.4.2 to style the textarea. Does that have anything to do with that?

I'm open to non-jQuery options as well, if there are any...


Solution

  • So I figured out a solution I was hoping to avoid. Basically I'm going to have to grab the value out of the input and evaluate the last character to determine what was input. It's going to add some overhead to the text input, but I don't see any other way around it.

    Check it out:

    var currentCursorPos;
    $this.on('keyup', function(e) {                    
        currentCursorPos = $this[0].selectionStart;              // grab the cursor position
        var val = $this.val();                                   // grab the input value
        console.log('Current Val: ' + val);
        var firstPrevious = val.charAt(currentCursorPos - 1);    // grab the character that was just entered
        console.log('Entered Character: ' + firstPrevious);
    });