I am aware that this has been asked many times, but none of the answers I have seen previously have worked for any devices that I am currently testing. None of the Android, iOS devices or Windows devices (Ranging from tablets to mobiles) implement the numeric keypad.
I am trying to implement a CV2 field on a website, and thus need the items to appear as a password field does. Below is the full input field with all I am currently using.
<input type="password" pattern="[0-9]*" autocomplete="off" maxlength="3" class="fm-input--small" required spellcheck="false" name="cvvNumber" data-alt-name="the last 3 digits on the back of your card" placeholder="e.g. 412" id="cvvNumber" inputmode="numeric"/>
Despite all of these different ways, it doesn't come up with a numeric keypad. Tested on iOS 8.0.3 devices and Android 4.1.2 and 4.4.0 devices.
I have though about changing it to an type=number, and forcing it to be starred out. However, the only solution I have found is this:
-webkit-text-security: disc;
Which unfortunately I cannot use as I need it to be on the Windows devices. Previously as well, pattern=[0-9]* had worked a few months back but now doesn't. Does anyone know if support for this has been dropped?
I am also worried about
inputmode="numeric"
As it is not officially part of the HTML5 release yet. It doesn't work so I don't think it will be included.
I am happy to solve this through more than just CSS by the way. If a small amount of jQuery needs to be written that could be the best way. Thanks in advance!
EDIT:
This works on iPhone iOS 6.1.3. Weird...
In IOS, with help of below script you can open numeric keyboard.
<input type="text" pattern="[0-9]*">
Or
<input type="number" />
and for Android.
<input type="number" step="0.01">
triggering-numeric-keyboards
Hope this help you.
1: Select your UITextfied
2: Go to Attribute Inspector
3: Choose required "Keyboard type"
use screenshot as a reference
Related
When I focus a text input field on Chrome on Android, the shift key is enabled ⇪, even though I set autocapitalize="none".
The input for this field is case-sensitive, so how can I help Android users to write lower-case strings by default?
Tests
Tested on Android 10, Chrome v85.0.4183.127 with Gboard.
<input autocapitalize="off"></input>
Works as expected, not capitalizing a single word.
<input autocapitalize="none"></input>
Also works as expected, not capitalizing a single word.
Suggestion
You may want to try using autocapitalize="off" (seems to be more restrictive than none in the meaning of the word, but the spec states they should be the same).
Given that this works as expected for me, it is possible that your software keyboard software is being troublesome. Try downloading and checking with Gboard and see if that resolves your issue.
I have very simple HTML in my Cordova app for users to input an email and a password. I use two textarea's so I can better control the styling.
<textarea placeholder="password" id="accountPassword" class="customInput login" rows="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
What I've found is that this works fine on iOS but some Android devices (pretty rare apparently) ignore the autocapitalize. I've had Android users report the problem and have now been able to isolate it while testing on a Sony Xperia (European version) running Android 7 (on a testing device farm site).
I've tried several suggestions I found on the web (adding a name field to the textarea, using autocapitalize="none", simplifying the textarea) and nothing helps. By the way, if I change to a regular input field, autocapitalize="off" works fine (on the Xperia) but my customer doesn't want that.
Thanks! Jon
To prevent textarea to capitalize, you easily can add a class like this:
.myTextArea{
text-transform: lowercase
}
How do I display a numeric keyboard with a decimal button on iOS and Android? Is there an Ionic-specific way to do this?
I'm able to display a numeric keyboard on both iOS and Android with the following:
<input type="number" pattern="[0-9]*">
iOS appears to disregard the type of value "number" and displays the number pad based off the pattern attribute, but the type is set to "number" anyway for Android.
Edit: Forgot to mention that I have tried pattern="[0-9.]*". iOS simply shows the full keyboard when I do this.
Edit2: I've also tried pattern="\d+[,.]?\d*" - again, to no avail.
Try the below syntax to achieve this. Its working in iPhone and Android.
<ion-input inputmode="decimal" type="number" />
Seems that the problem is relative to some samsung devices only.
I have the same issue that you describe on Samsung Galaxy Note 8.0 (android 4.4.2) but everything works fine on Nexus simply using
<input type="number" step="0.01">
related posts Google Chrome on Android (and only Android) Does not allow Decimal with type number and step="any"
and Samsung Galaxy Tablet does not allow entering floating point numbers to inputs with "number" type
refer this link:
https://github.com/skol-pro/ion-digit-keyboard-v2#6---example--demo
just hide the native keyboard on setfocus().
I have a PhoneGap app with several fields of input type="text". Besides that it has some HTML textareas.
When running the app on Android and typing text into an HTML textarea element, the Android predictive text works fine. However, when I type text into an input element of type="text" no predictions are shown.
I tested this both on my HTC Sensation and Samsung Galaxy II tablet, both running Android 4.0.3, and the predictive text is not shown on both devices.
This problem can be easily reproduced by adding an input element to the example application that is provided by PhoneGap. I tried removing all css to see if that was causing my problem, but the issue remained.
Does anyone know a way to fix this?
I think text prediction depends of the keyboard you are using not the type of input. Check your text suggestions in the settings of the phone.
I just discovered that this works on iOS:
<input type="text" autocorrect="off" />
Perhaps it might work on Android as well.
The problem is no longer present in current versions of PhoneGap/Cordova.
I would like to have a HTML 5 Input Element like:
<input type="number" step="any" value="3.5"/>
This works fine on my iPhone Safari Browser but not on Chrome for Android.
It shows the right Soft-Keyboard, but not the decimal separator. So I'm not
able to enter any decimal places.
Are there e.g. any JavaScript tweaks that make the chrome browser show the
right keyboard?
Because it feels like a bug: Can someone point me to the Chrome for Android Issue Tracker to open up a case for this?
I got the same problem and came accross this link: Google Chrome on Android (and only Android) Does not allow Decimal with type number and step="any"
I have not yet tested on a iDevice, but i got the problem on my Samsung Galaxy SIII.
This is not a bug, but according to the W3 specification that other browsers does not follow. The fix is supposed to be "any", but Chrome hasn't implemented that either.