8

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?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Arya
  • 395
  • 2
  • 6
  • 14
  • you can use event.keyCode or event.key to get key info. Try this: document.onkeyup = function(e){ console.log(e); } – Dipen Shah Aug 13 '15 at 04:42
  • Possible duplicate of http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed – Kushal Aug 13 '15 at 04:43
  • 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 – Juned Lanja Aug 13 '15 at 05:08
  • @DipenShah how can see console on mobile device. – Arya Aug 13 '15 at 05:18
  • @Kushal I have seen mostly solution but it didn't gave me proper solution. That's why i create a new thread of this question. – Arya Aug 13 '15 at 05:18
  • 1
    @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. – Arya Aug 13 '15 at 05:20
  • 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. – Juned Lanja Aug 13 '15 at 05:34
  • @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 – Kushal Aug 13 '15 at 05:51
  • 1
    @Kushal yes all the browsers gave the keycode on keypress but not on android mobile chrome browser. It will give only in desktops. – Arya Aug 13 '15 at 06:51
  • On my next devece this one worked: document.onkeyup = function(e){ alert( String.fromCharCode(e.which || e.keyCode)); }; – Dipen Shah Aug 13 '15 at 13:07
  • @Arya and how do you detect it on Mobile ?? – cbdeveloper Apr 16 '20 at 11:25

2 Answers2

4

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.

Juned Lanja
  • 1,466
  • 10
  • 21
  • Hi, could you please take a look at: https://stackoverflow.com/questions/61248020/best-way-to-detect-typed-key-on-different-systems-and-keyboards I'm having trouble detecting keyCodes on mobile. Thanks! – cbdeveloper Apr 16 '20 at 11:24
  • On some android, `keyCode` & `which` would always be `229`. – Hackinet Apr 01 '21 at 10:09
  • Please test your answers on corresponding device before posting. Either you didn't or since, behavior has changed. As stated before by @Hackinet it always return 229 so you can't identify key. – BalB Nov 25 '21 at 10:18
0
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.

Kunal Mittal
  • 59
  • 1
  • 2