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
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">
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.
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.
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>
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