Showing numeric keyboard issue in IOS , Ionic - javascript

I have used input type = "number" for displaying only a numeric keyboard. It works fine in android, but not in iOS. Is there any other way to do that?
What I actually want is an input box that only allows 0 to 9 and the max length of input is 1.
Please let me know. Thanks in advance.
<input type="number" maxlength="1"/>

You can use pattern: pattern="[0-9]*"
So: <input type="number" maxlength="1" pattern="[0-9]*" />

<input type="text" pattern="\d*">
Or you can use a plugin
https://market.ionic.io/plugins/ion-digit-keyboard

Use type="tel"
<input type="tel" />

Related

how to restrict user to enter only 10 characters in mobile field

Could you please tell me how to restrict user to enter only 10 characters in mobile field.I already used
maxLength={10}
.but it not working .here is my code
https://codesandbox.io/s/quizzical-hellman-65dy3
<RFField
component={SForm.Input}
label="Number"
name="number"
type="number"
maxLength={10}
placeholder="Please Enter full NUmber"
validate={required}
/>
You can use regex pattern
/^\d{10}$/
Demo
If you want to limit the max char in the input you need to change your code like this
<input type="text" pattern="\d*" maxlength="10">

Trigger numeric keyboard for input text all mobile devices [duplicate]

This question already has answers here:
Phone: numeric keyboard for text input
(16 answers)
Closed 5 years ago.
Is there a way to trigger the numeric keyboard for a <input type="text" /> field for all mobile devices?
I've tried both:
<input type="text" pattern="\d*" />
<input type="text" pattern="[0-9]*" />
But this only seems to trigger the numeric keyboard for iOS. Android still displays the default keypad.
Note: I'm trying to do a duration input, ie. HH:MM, so <input type="number" /> is not a solution for this as I need a input field that will accept numbers and colons.
I also don't mind using javascript if that's the only solution.
I didn't try this but I did see some solutions in the past:
<input type="number" pattern="[0-9]*" inputmode="numeric">
Or:
<input type="number" pattern="[0-9]*" required>
I think type=tel is also supported but never tried it:
<input type="tel">
Here you have few examples.

Custom validation in HTML5 for numbers CVC CVV

How to provide a custom validation for a number using HTML5
HTML
<input class="required" id="field" type="number" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
Here it is allowed to type in only one number. But max length doesn't work here.
Is there another solution ?
use max attribute of the input number
<input class="required" id="field" type="number" max="999" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
or even without pattern as
<input class="required" id="field" type="number" max="999" min="-999" name="cvv"/>
As per the documentation, the maxlength works only if the value of the type attribute is text, email, search, password, tel, or url. I suggest you should use javascript validations for this particular case.
For a very simple example please refer to this link.

Polymer with javascript

I'm trying to control my polymer text box with input type text, this textbox is being used to receive a users Phone number
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!">
<!--Text area to obtain phone number -->
<input type="text" is="iron-input" min="10" maxlength="10" size="10"/>
</paper-input>
what i'm trying to do with this is actually use javascript with polymer to limit this text box input to simply just numbers with a minimum input requirement set by me.
I had a couple of rough attempts at it but i'm fairly new to polymer so none of the approaches i took worked.
any tips would help !
thank you !!
<paper-input> is not designed to wrap a regular <input /> element. You would use <paper-input-container> for that.
In your case, use the paper input to limit characters directly:
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!"
minlength="10"
maxlength="10"
size="10">
</paper-input>

Angular regex and input type

If I use type='text' for input: ng-pattern works and ng-max validation doesn't work;
If I use type='number' for input: ng-pattern doesn't work and ng-max validation works; (I can enter unlimited count of zeroes at the begining and in the end)
Example:
<input name="input" type="number" placeholder="0.00"
data-ng-model="example.value"
data-ng-max="100"
data-ng-pattern="/^0(\.\d{1,2})?$|^[1-9]\d{0,14}(\.\d{1,2})?$/"
data-ng-required="true"/>
http://plnkr.co/edit/hv3qrTZzBy8RlPGT8Snv?p=preview
What is the recipe for this problem?
Please take a look at this Plunker and see if it works now.
http://plnkr.co/edit/r6FiR5ZSnnDpcJW2893U?p=preview
<input
name="input"
type="number"
placeholder="0.00"
data-ng-model="example.value"
max="100"
data-ng-pattern="/^0(\.\d{1,2})?$|^[1-9]\d{0,14}(\.\d{1,2})?$/"
data-ng-required="true"/>
It was a really small change, but sometimes that's all it takes. :)
According to the official documentation you should you [max="string"] instead of "ng-max".
https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

Categories