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().
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 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
I got a strange jQuery Mobile problem (sorry for my English)
(tested with a Samsung Galaxy S2 - Default Browser. On my Nexus 4 there is all fine (Default Chrome))
I have a form with some input fields. they all have a fix value. (screen 1)
Screenshot 1:
The code:
<input type="tel" name="format-breite" id="format-breite" class="chfunc" value="Breite in mm: ">
<input type="tel" name="format-hoehe" id="format-hoehe" class="chfunc" value="Höhe in mm: ">
When you click in the input the value becomes white (you cant see it anymore) and the cursor is not at the right position. But you can see the text you type in with the keyboard (screen 2 & 3).
Screenshot 2:
Screenshot 3:
Then, when you click out of the input all is here again but the text you typed in is not at the right position. (screen 4)
Screenshot 4:
I only get that problem with jQuery Mobile. On other website there is no problem with input values.
Any suggestions?
I did some testing with this code in a jsbin and browserstack. From what I can tell is that Samsung S2 isn't fully HTML5 ready for the input type="tel" tag/attribute. Here is the test page I used: http://jsbin.com/eweqeq/1/edit
If I changed it to input type="text" I get the behavior you're looking for in the simulator.
Seems that the functionality of input type="tel" is very minimal for android according to this report http://www.quirksmode.org/html5/inputs_mobile.html I would classify this as a device and HTML5 issue then a jQuery Mobile issue. I get the same behavior without the jQuery Mobile library added to the page here: http://jsbin.com/awagos/1/edit
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.