Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 722
gabaum10 Avatar asked Mar 19 '23 08:03

gabaum10


1 Answers

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);
});
like image 159
gabaum10 Avatar answered Apr 25 '23 08:04

gabaum10