PhoneGap / Android Phone Keypad

Question

I am developing an application with several input[type=numer] elements. Android just now.

The built-in numeric keypad has two problems:

  * it inconsistent (different on different versions of Android) * it has unnecessary keys (space, dash, comma and "next") which add confusion. 

I would like to have a keyboard of everything with numbers, comma and backspace . Is it possible?

Edit October 3, 2013 . A third problem has appeared, and this is by far the worst. Samsung seems to have decided to skip the decimal character (".") From their numeric keypad, at least the one that appears when input[type=numer] gets focus in the browser. It seems that all Galaxy S4 devices are affected (I saw this on the S4 Mini, I don’t have access to many Samsung devices ... all I see are Nexus fans :-)). I could not find much about the problem on Google, but I saw Galaxy S4 users complaining about it in 2012 (I tried it on one S3 a few weeks ago, and everything was fine).

In short, after careful consideration, I decided to implement my own keyboard in html / javascript (Samsung is too important, I get bad reviews just because of this, and I don’t think I can do anything to fix It). I am now rewriting my application, I will try to remember and tell the story when we are done.

Edit December 3, 2013 . My current solution (still in alpha stage, the application rewrites me much longer than I expected) is a keyboard fully implemented in javascript. I used regular <span> elements instead of <input> not to release the OS keyboard. As an added benefit, I can control everything related to the keyboard, so I added a few arithmetic keys (x, -, *, /, (and)), and the user can enter expressions, for example, "3x (2 + 5.5)) "instead of" 15 ". I will contact the application when it is ready (at least for a few more weeks).

Answer 1

Of course it is.

First, set your activity to never show the keyboard (try android: windowSoftInputMode = "stateAlwaysHidden"). You might be having trouble if EditText insists on pulling it, but you can do a mock of EditText based on a TextView to get around this or inherit from EditText and override some methods. There are several guides on this: Close / hide the soft keyboard of Android

Secondly, create your own UI keyboard element, with any buttons that you want in any layout you want, and click the buttons on that keyboard, for each click add the corresponding character to the displayed text EditText / TextView.

However, users may not like this. As much as you do not like that the keyboard looks different for each device, each user is used to his keyboard and expects to see it when editing text. I urge you to reconsider.

Answer 2

Thanks for the update. This is how I implement it. It may be similar to how you do it. I would be curious what problems you have encountered so far.

I did not transfer this to production, but still tested, but so far everything is working. I removed some checks from the code below to make it much shorter ...

Basically, the keyboard is 1 line on the iPad and 2 lines on the phone. It supports any input field with the "keyboard" class and selects the entire ".keyboard-item", so the user understands which field they are updating.

  <div id="stuff"> <ul> <li> <label for="name">Name</label> </li> <li> <input type="text" id="name" class="required"/> </li> </ul> <ul class="keyboard-item"> <li> <label for="number">#</label> </li> <li> <input type="text" id="number" class="keyboard required" pattern="[0-9]*" readonly="readonly" onkeypress="dosomething(this)"/> </li> </ul> </div> <div class="mobile-number-keyboard"> <div class="mobile-number-keyboard1"> <span style="padding-left: 20px;">0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span style="padding-right: 20px;">5</span> </div> <div class="mobile-number-keyboard2"> <span style="padding-left: 20px;">6</span> <span>7</span> <span>8</span> <span>9</span> <span style="width: 8px;">.</span> <span style="padding-right: 20px;"><</span> </div> </div> <style> .mobile-number-keyboard { width: 101%; height: 40px; margin: auto; margin-bottom: 20px; } body.phone .mobile-number-keyboard { height: 80px; } .mobile-number-keyboard span { float: left; padding: 8px 22px; border: 1px outset White; cursor: pointer; background-color: #4F81BD; color: White; } .mobile-number-keyboard span:hover { background-color: #87CEFA; } .mobile-number-keyboard span:active { border-style: inset; background-color: #00E5EE; } body.phone .mobile-number-keyboard2 { clear: both; height: 40px; } .keyboard-focus { background: #FFC1C1; border: 1px solid red; } .keyboard-item-focus { background: #00E5EE; } </style> <script> function initCustomKeyboard(jContainer) { jContainer.find('input, select, textarea').click(function() { $('.keyboard-focus').removeClass('keyboard-focus'); $('.keyboard-item-focus').removeClass('keyboard-item-focus'); var me = $(this); if (me.hasClass('keyboard')) { me.addClass('keyboard-focus'); var parent = me.parent(); if (parent.hasClass('keyboard-item')) { parent.addClass('keyboard-item-focus'); } else { parent = parent.parent(); if (parent.hasClass('keyboard-item')) { parent.addClass('keyboard-item-focus'); } else { parent = parent.parent(); if (parent.hasClass('keyboard-item')) { parent.addClass('keyboard-item-focus'); } } } } }); jContainer.find('.mobile-number-keyboard').find('span').click(function() { var me = $(this); var val = me.text(); var box = jContainer.find('.keyboard-focus'); var bval = box.val(); var blen = bval.length if (box.length > 0) { if (val === '<') { if (blen === 0) { return; } if (blen > 1 && bval.substring(blen-2, blen-1) === ' ') { box.val( bval.substring(0, blen - 2) ); } else { box.val( bval.substring(0, blen - 1) ); } var whichCode = 8; } else { var max = box.attr('maxlength'); var whichCode = val.charCodeAt(0); if (max === undefined || parseInt(max) > blen) { box.val(bval + val); } else { return; } } var ev = $.Event('keydown'); ev.which = whichCode; box.trigger(ev); ev = $.Event('keypress'); ev.which = whichCode; box.trigger(ev); ev = $.Event('keyup'); ev.which = whichCode; box.trigger(ev); } }); } $(function() { initCustomKeyboard('#stuff'); } </script>