javascript – Cross-browser get keyCode

I’m trying to get a cross-browser way to listen to keyCode of user’s keyDown.

For mobile browsers, I have to trigger the virtual keyboard, so I use an input hidden by css, triggered with a click event. This works well except that when I try to listen to keycode, on fennec (mobile Firefox), I’ve got strange behavior.

Here is the function I use to listen to keycode.

document.querySelectorAll('input')[0].addEventListener('keydown', handler);

function handler(e) {
  e.preventDefault();
  var k = (e.which) ? e.which : e.keyCode;
  document.getElementById('log').innerHTML = k;
  this.style.backgroundColor = "#FFAAFF";
}

<input type="text" />
<span id="log"></span>

• In Firefox for android (v34 to v37), it won’t fire until the user
  typed return⏎.
  Actually, I found that if the value of the input is not
  empty, it works well, at least on load. So I thought of a
  workaround like this one : if(this.value=='')this.value='*';
  Seems to work but if you spam it, the backspace
  ⌫ isn’t blocked, so when the input is cleared, the bug
  comes back : the workaround doesn’t fire either.
  +This a ugly workaround, which I’m sure will create other bugs in other browsers.

     
     document.querySelectorAll('input')[0].addEventListener('keydown', handler);
     
     function handler(e) {
       if(this.value=='')this.value='*';
       e.preventDefault();
       var k = (e.which) ? e.which : e.keyCode;
       document.getElementById('log').innerHTML = k;
       this.style.backgroundColor = "#FFAAFF";
     }
     
     

     
     <input type="text" value="*"/>
     <span id="log"></span>
     
     

• In B2G (Firefox Os 1.3 on device or 2.0 emulated) the behavior is
  even odder:
  the function only reads keyCode for backspace⌫(keycode 8) or return⏎(keyCode
  13) keys. Any other key will return 0.

So, my question is, do you know a better cross browser way to listen to keyCode, a one working in all major browsers, desktop or mobile, and on fennec?

Ps: even if I write my app in vanilla-js, it’s ok for me to see solutions with any library.

$(document).ready(function () {
    var inputEvent = 'oninput' in window ? 'input' : 'keyup';
    $('#listen').on(inputEvent, function (event) {
        $('#show').val($('#show').val() + '\n' + event.type);
        console.log('--- input event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |---> ' + event[v]);
            }
        }
    })
    //just added to see what Silk listens for on the keyup event
    $('#listen').on('keyup', function (event) {
        $('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + event.which);
        console.log('--- keyup event ----');
        for (var v in event.originalEvent) {
            if (event.hasOwnProperty(v)) {
                console.log(v + ' |-.-> ' + event[v]);
            }
        }
    })
});

input {
    font-size: 22px
}
input, textarea {
    width:300px;
}
textarea {
    height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <input type='text' id="listen" />
    <br/>
    <br/>
    <textarea type='text' id="show"></textarea>
</div>

Tags: browser, java, javascriptjavascript