Phonegap Android force numeric keyboard on input - android

I'm using
-webkit-user-modify: read-write-plaintext-only;
on my input fields in my app to prevent several behavior with android ICS but i would like to force the numeric keyboard to show up on specific inputs. And i want to keep the CSS line.
Is there a way to do it ? by modifying some classes in the .java files ? Or maybe is there another way ?
Thanks

On HTML5 (as you're talking on Java mods, I wrote this to be clear):
The only way to trigger the numeric keyboard on Android devices is to use <input type="number"> or <input type="tel">. That comes with some small problems, especially if you're dealing with Angular or with HTML5 native validation, but for the general use this should be no problem.

Related

How to stop autocorrect input text for a PWA on mobile browser (Android and iOS)?

On my PWA, for input, native keyboard of the phones are active. Need code for following usecases
1. How to disable autocorrect for PWA for android and iOS?
2. How to build your own keyboard without auto correct for PWA for android and iOS?
Try using following code with you input field inside form element :-
autocorrect="off" autocapitalize="none" autocomplete="off" spellcheck="false"
I think making your own keyboard is not a good idea as it will take much time, if you want to have your own virtual keyboard(i hope for security reasons you are doing this) you can use open souce javascript plugins for the same.

cordova android: remove suggestions

I have a cordova app (with ionic2). I'd like to remove the autocomplete/suggestion/autocorrect/... bar on soft keyboard for specific input.
Is it possible ?
I already try with attributes like spellcheck="false" autocomplete="off" autocorrect="off" but it change nothing.
Also after multiple lectures, my problem look comming from the event keycode 229.
But I found nothing to manage the inserted input correctly.
So the idea was to remove this autocomplete bar to avoid these keycode.
When I use a password input type it's working properly. Of course, I saw disc in places of characters. And I need to see characters. For these purpose I tried to remove them with css text-security but of course, it's not working for input type password...
An other solution could probably be accessing the native keyboard or the native input with custom cordova plugin. But I don't know how to access to linked EditText with Cordova.
Any ideas ?
Regards

Looking for Solutions to Samsung's crappy number keyboard

So on most versions of Android, using a Samsung device, the <input type="number"> pulls up the number pad, but does not allow the entry of a decimal. From searching on the web, this is a known bug, but I've found very little talk regarding solutions or response from Samsung.
Anyone have a good idea to solve the problem? Best I can come up with is writing a script that replaces <input type="number"> with <input type="tel">. This brings up a number pad at least, and you can get to the decimal by tapping on the symbol key.
NOTE: I get the same behavior with or without the pattern="[0-9\.]*" attribute and/or the step="any" attribute. Also, I'm looking for a pure web-based solution, not a native app solution.
You can create a custom keyboard using IME. Here is a link http://developer.android.com/guide/topics/text/creating-input-method.html

Numeric keyboard as default, but allow text

I'm currently developing an application targeted at android and desktop devices using apache cordova and HTML5.
In order to get the numeric keyboard to pop up I've used input type="number", which works fine.
However, the input field should also accept strings. The current functionality of type=number is that the ui seems to allow for strings to be entered, but the value property of the element is not changed if the input is invalid (e.g not numberic).
Is there a way of getting the numberic keyboard on mobile devices, while still being able to enter text?
My inital tries consisted of capturing the keydown event and manually setting the this.value property. I've tried this using jQuerys .val() and of course the more 'native' approach element.val += char. None of which work. UI is updated, but the change is not reflected in the model.
EDIT
For the next guy trying to achieve this.
1) The HTML solution.
As #LuudJacobs mentions in the comments below; There's currently no way to decide which keyboard is shown except for defining the type-attribute. Though some devices have a button to go back to alphabet keyboard, its not the case for every device. And can not be used reliably.
2) Writing a phonegap/cordova plugin.
It is possible to write a plugin to show and hide the keyboard at will. But, as far as I could find, there is currently no way of programmatically telling it to default to the symbols keyboard. Thus the functionality achieved is similar to using type=number and type=text in the HTML. Another problem with this approach is the diversity of keyboard for android devices, where even users themselves can install their custom keyboard. The functionality of the keyboard can are therefore unknown. What works on one device, may not work on the next.
3) JS/HTML/Canvas solution
Finally... A feasible solution. I suggest taking a look at this walkthrough as it shows an easy way to creating the keyboard using just html and js. Another option would be to use a canvas, and draw the keyboard yourself, but I would imagine that this is more error prone and harder to do.
As explained in the HTML5 spec you can not have anything but valid floats in a input type="number". So You can not. On a sidenote: how would users enter text when they'd only have a numeric keyboard?

Is there a way to have a masked numeric input field?

I am creating an HTML5 application on an Android and for this specific scenario, we have an input field that is for a credit card's security code and we want to force the input field to be numberic only and masked.
I have had no luck searching for this specific case and from everything I can tell from researching/trying it out for myself is that this can't be done purely through HTML5 (since number and password are both options for type and only one type can be used). Am I missing something and there is a way to pop-up the numeric keyboard while having the input be masked through HTML5 or is there another way to force the keyboard input type or masking the input through CSS or JavaScript?
Thanks for any help!
If it's only required to work in WebKit based browsers, and CSS is allowed in 'purely through HTML5', you could try:
input[type=number] {
-webkit-text-security: disc;
}
I'm not sure if there's currently any equivalent for other browsers, in the future this may be controllable through the appearance CSS property. The CSS3 version of appearance has been dropped from the spec, so it looks like you'll have to wait for the standardization of text-security for a cross browser solution.

Categories

Resources