How to get keyCodes from Android mobile device keyboard?

Question

Currently, I am facing a problem on a mobile device. I have an input field where only some keys are allowed to be pressed: e.g. only the numbers 0–9. It works fantastic on a web browser. But when I open it in my Android mobile device it fails.

I have used keyup and keypress. keyup is working but I want to know which key fired the event from the mobile keyboard. How would I get that?

Pantheon

you can use event.keyCode or event.key to get key info. Try this: document.onkeyup = function(e){ console.log(e); } – Dispirited

Possible duplicate of #302622 – Orthogenetic

problem is that some keycode in mobile will having same keycode that are for numeric so it will allows that keys also.I have faced same problem and i come around answer that i have give here – Working

@DipenShah how can see console on mobile device. – Pantheon

@Orthogenetic I have seen mostly solution but it didn't gave me proper solution. That's why i create a new thread of this question. – Pantheon

@Jugnu when i already tried this type of code. First thing when you write keyCode or charCode it will gives on only 229 0 result. So how would you know which key press currently. – Pantheon

you can't find key but you can map that keycode with keyboardmap array by putting that key value on given index as keycode as i have done. – Working

@Amy I think so almost all the browser support returning the keycode on keypress .. could you please provide the browser details that you are testing on and the code you have written to test against – Orthogenetic

@Orthogenetic yes all the browsers gave the keycode on keypress but not on android mobile chrome browser. It will give only in desktops. – Pantheon

On my next devece this one worked: document.onkeyup = function(e){ alert( String.fromCharCode(e.which || e.keyCode)); }; – Dispirited

@Pantheon and how do you detect it on Mobile ?? – Manicdepressive

Answer 1

I'm using a array that has maping to all keyboard keys with keycode at given index and then on element's keydown i'm checking whether its allowed key or not, because in mobile some keyboard key will have the same code as numeric key's keycode so it will allow that keys.

So i'm using following to prevent that situation.

//keyboard maping array   
var keyboardMap = ["", "", "", "CANCEL", "", "", "HELP", "", "BACK_SPACE", "TAB", "", "", "CLEAR", "ENTER", "RETURN", "", "SHIFT", "CONTROL", "ALT", "PAUSE", "CAPS_LOCK", "KANA", "EISU", "JUNJA", "FINAL", "HANJA", "", "ESCAPE", "CONVERT", "NONCONVERT", "ACCEPT", "MODECHANGE", "SPACE", "PAGE_UP", "PAGE_DOWN", "END", "HOME", "LEFT", "UP", "RIGHT", "DOWN", "SELECT", "PRINT", "EXECUTE", "PRINTSCREEN", "INSERT", "DELETE", "", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "COLON", "SEMICOLON", "LESS_THAN", "EQUALS", "GREATER_THAN", "QUESTION_MARK", "AT", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "WIN", "", "CONTEXT_MENU", "", "SLEEP", "NUMPAD0", "NUMPAD1", "NUMPAD2", "NUMPAD3", "NUMPAD4", "NUMPAD5", "NUMPAD6", "NUMPAD7", "NUMPAD8", "NUMPAD9", "MULTIPLY", "ADD", "SEPARATOR", "SUBTRACT", "DECIMAL", "DIVIDE", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "F13", "F14", "F15", "F16", "F17", "F18", "F19", "F20", "F21", "F22", "F23", "F24", "", "", "", "", "", "", "", "", "NUM_LOCK", "SCROLL_LOCK", "WIN_OEM_FJ_JISHO", "WIN_OEM_FJ_MASSHOU", "WIN_OEM_FJ_TOUROKU", "WIN_OEM_FJ_LOYA", "WIN_OEM_FJ_ROYA", "", "", "", "", "", "", "", "", "", "CIRCUMFLEX", "EXCLAMATION", "DOUBLE_QUOTE", "HASH", "DOLLAR", "PERCENT", "AMPERSAND", "UNDERSCORE", "OPEN_PAREN", "CLOSE_PAREN", "ASTERISK", "PLUS", "PIPE", "HYPHEN_MINUS", "OPEN_CURLY_BRACKET", "CLOSE_CURLY_BRACKET", "TILDE", "", "", "", "", "VOLUME_MUTE", "VOLUME_DOWN", "VOLUME_UP", "", "", "", "", "COMMA", "", "PERIOD", "SLASH", "BACK_QUOTE", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "OPEN_BRACKET", "BACK_SLASH", "CLOSE_BRACKET", "QUOTE", "", "META", "ALTGR", "", "WIN_ICO_HELP", "WIN_ICO_00", "", "WIN_ICO_CLEAR", "", "", "WIN_OEM_RESET", "WIN_OEM_JUMP", "WIN_OEM_PA1", "WIN_OEM_PA2", "WIN_OEM_PA3", "WIN_OEM_WSCTRL", "WIN_OEM_CUSEL", "WIN_OEM_ATTN", "WIN_OEM_FINISH", "WIN_OEM_COPY", "WIN_OEM_AUTO", "WIN_OEM_ENLW", "WIN_OEM_BACKTAB", "ATTN", "CRSEL", "EXSEL", "EREOF", "PLAY", "ZOOM", "", "PA1", "WIN_OEM_CLEAR", ""];
//Allowed keys as per your requirement          
var allowedKey = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "NUMPAD0", "NUMPAD1", "NUMPAD2", "NUMPAD3", "NUMPAD4", "NUMPAD5", "NUMPAD6", "NUMPAD7", "NUMPAD8", "NUMPAD9", "DELETE", "BACK_SPACE", "DECIMAL", "LEFT", "RIGHT", "TAB", "SUBTRACT", "PERIOD"];

//bind keydown to your element
element.on("keydown", function (e) {
        var key = e.charCode || e.keyCode || 0;
        var keyValue = keyboardMap[key];
        if ($.inArray(keyValue, allowedKey) !== -1){
              return true;
        }
        else{
              return  false;
        }
}

It's working for me hope so it will work for you also.

Working

Hi, could you please take a look at: #61248520 I'm having trouble detecting keyCodes on mobile. Thanks! – Manicdepressive

On some android, keyCode & which would always be 229. – Mighty

Please test your answers on corresponding device before posting. Either you didn't or since, behavior has changed. As stated before by @Mighty it always return 229 so you can't identify key. – Croaker

Answer 2

var input_field = document.getElementById('chatBot-input');
input_field.addEventListener('textInput', function (ev) {
  var char = ev.data; // In our example = "a"
  var keyCode = char.charCodeAt(0); // a = 97
  console.log(keyCode)
});

This will definitely works.

Crabstick