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

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.

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

Showing numeric keyboard issue in IOS , Ionic

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

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>

Getting Search Keyboard on iPhone using PhoneGap

I have created a search field on a mobile app i am creating via PhoneGap. I've tried using with no luck. I also know that i could get around the visual aspect of the input field via CSS & Javascript, however how do i get the Keyboard to have a "SEARCH" button on the bottom right instead of it saying "RETURN"
Use
<form> ...
<input type="search" /> ...
</form>
The <form> is a must.
(See also http://groups.google.com/group/phonegap/browse_thread/thread/bca19709dbdf2e24/eb312d0607102395?lnk=raot)
The following are supported in mobile safari, and therefore PhoneGap since iPhone OS 3.1
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
Search is not supported as an input type, and would require considerable native work to make happen in PhoneGap.
See here for details: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
Update:
The following input type works as expected:
There are some important things that you have to keep in mind:
It only works on iPhone OS 3.1 +
The input tag MUST be inside a tag.
Also, it is worth noting the following tags as well:
<!-- display a telephone keypad -->
<label for="tiTel">Telephone:</label>
<input type="tel" id="tiTel"/>
<br/>
<!-- display a URL keyboard -->
<label for="tiUrl">URL:</label>
<input type="url" id="tiUrl"/>
<br/>
<!-- display an email keyboard -->
<label for="tiEmail">Email:</label>
<input type="email" id="tiEmail"/>
<br/>
<!-- display a numeric keyboard -->
<label for="tiZip">Zip Code:</label>
<input type="text" pattern="[0-9]*" id="tiZip"/>
<br/>

Categories