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.
Related
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?
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.
I have an app written in HTML 5 with an input that looks like <input type="number" min="0" max="12">, but this doesn't validate. You can write any numeric value and it doesn't get stripped on blur. Does anyone know if this is a known issue for apps?
Now I'm validating the field in JavaScript but would like to use the HTML 5 functionality if that's possible.
It looks like Android only has partial support for <input type="number">. It appears to ignore the min and max attributes.
That caveat aside, I think your understanding of how these fields are treated is flawed. The browser will not strip invalid characters on your behalf. If it detects that there are values that don't match the input criteria, it may prompt the user to fix their input, but it's up to you (the app developer) to do the actual validation and/or any filtering.
Check out Dive Into HTML5's section on forms for more information.
For some reason, when pressing enter on the default Android browser from within tel input fields, this will not submit the form.
Are there any known workarounds available?
It may be possible to change the input type from tel into a normal text input box and then restrict what information can be entered with the pattern attribute ( http://www.w3schools.com/html5/att_input_pattern.asp ).
This may be similar enough to act as a workaround, but you do lose the nice number entry keyboard.
Is it possible to create a custom InputType for the Android keyboard to use?
I want to make it so the keyboard shows the number pad first and then after a user types in a float or an integer followed by a space I want it to switch to the default alpha keyboard.
I tried using a TextWatcher instance, but this seems buggy on anything above 2.0 (sometimes it would lose a character, this doesn't happen on 1.6 or below).
Any ideas?
Thanks for reading.
Yes, it is possible.
I haven't done it myself, but the evidence is in apps that serve as input types. Look up apps such as Swype and 8pen; they serve as different input types, with Swype building on a keyboard similar to the default and 8pen providing a different input UI altogether.