Just be clear I am not asking about validation,just pure layout. I am trying to display three separate input fields with a dash in between. Here is a link to what I have so far.
http://jsfiddle.net/kCNA4/
Here's my question is there a better way of doing this, am I doing it completion wrong or is the Way I wrote it correct. Thanks so much.
Looks pretty good to me - agree with comment, – should be used for hyphen, only a couple of improvements I would add. One, input type number (I know you are not worried about validation now) as HTML 5 input type definition. Also, use unique name for field so that when it is posted, you can identify the output.
<input type="number" value="" maxlength="3" name="phoneNumberFirst" id="mainFormPhoneFirst">
One of the facets about phone number entry is that there is a better 'type' available which many feature phones and mobile web browsers provide unique, number-only entry methods for.
<input type="tel" ... />
If you want just numeric input, this seems to be a great way to "force" that for mobile browsers (there's probably a workaround or doesn't work for all mobile browsers). You'll still need to filter and validate the input but I feel that the experience is going to be better for the mobile user.
You should try this simple input filed tags like this:
<input type="tel" name="tel1" title="3-digit" maxlength="3" minlength="3" size="3"/> -
<input type="tel" name="tel2" title="3-digit" maxlength="3" minlength="3" size="3"/> -
<input type="tel" name="tel3" title="4-digit" maxlength="4" minlength="4" size="4"/>
Related
I have read this post:
https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
It says I can use the following code to allow users to enter numbers with a number-only virtual keyboard, which is quite convenient than the traditional virtual keyboard:
<label for="creditcard">credit card number:</label> <input pattern="[0-9]*" type="text" name="creditcard">
However, there is no way to enter dot here. For instance, if I want to enter 5.6 or 6.0, I got stuck there.
Is there any way I can do this?
I hope you are doing well and safe from COVID-19.
<input type="tel" inputmode='decimal'/>
I’ve been using input type = tel it accepts pattern parameters and pulls up the number keyboard inputs on mobile.
The keyboard on mobile for type=”tel” has some phone-specific characters like #, but its not a bad solution until support for inputmode is better, even if it feels semantically wrong. It doesn’t seem to affect screenreaders in a negative way.
Thanks.
replace
<input type="number" inputmode='numeric"/>
by
<input type="number" inputmode='decimal'/>
Knowing both is used as a hint for mobile browsers, I couldn't find a real doc about the difference between using <input type="tel"> and <input inputmode="tel">. So
what's the difference?
which is better to use?
why duplication if it's the same?
The MDN doc suggests using the type. But it's still unclear on the explaination.
If you want only show the "phone keys" like 0 to 9 and * and #, use
<input inputmode="tel">
If you want to show a form field with regular keyboard, use
<input type="tel">
Also see "Everything You Ever Wanted to Know About inputmode".
Despite my constant research, I have seen studies that accept letters for input tel.
<input
type="tel"
placeholder="Phone Number"
required
pattern="^[0-9-+\s()]*$"
maxLength="16"
minLength="6"
data-for="phoneNumber"
/>
Here I want it to only accept numbers. But it also accepts letters. How can I fix this?
The design team at the UK Government did a bunch of research and concluded that you shouldn't try to prevent that
The web and Android versions of Chrome implement this by silently discarding all letter input except the letter ‘e’.
This means users are not given feedback on what type of characters <input type="number"> accepts, and assistive technologies don’t alert the user that their input has been silently discarded.
According to them, your best bet would be to just use <input type="tel"> and validate server-side to make sure that letters aren't included.
Edit: although the link references <input type="number"> which you haven't asked about, my understanding of your request is that you're trying to prevent people entering certain characters into your input field, which <input type="number"> does, and the advise is: don't try.
Use input : number instead
<input type="number">
This will only accept number
Why not trying following regular expression REGEX, since it will also fit your length requirement:
<input
type="tel"
placeholder="Phone Number"
required
pattern="^[0-9-+\s()]{6,16}"
data-for="phoneNumber"
/>
I am creating an input field type tel and this type always giving me the US as a default result i want to change it to Netherland for example,
Is it possible to do it directly?
<input name="phone" type="tel" id="phone" required="required" class="form-group padding-inputs" autocomplete="off" data-intl-tel-input-id="0">
Is there anyway to set the default country to something different then the us ? and thank you for the help
You will have to use pattern validation as described here. As far as I am aware there is no other method.
Quote from MDN:
As we've touched on before, it's quite difficult to provide a
one-size-fits-all client-side validation solution for phone numbers.
A regex example for dutch phone numbers can be found here.
I tried the <input type="number" /> but on Opera that outputs a strange input box coupled with an "up and down" handler. What I expected was a regular text field that once you focus on it prompts the number keyboard instead of the alphabets. Is that even possible?
p.s. I'm not trying to validate. It would be a nice user experience, that's all.
Use pattern="[0-9]*"
Example number input: <input type="number" pattern="[0-9]*" />
Example phone input: <input type="tel" pattern="[0-9]*" />
Note: Browsers that do not support type="tel" will default to a text type
Beware: Using type="number" can cause problems with some browsers and user experience for credit card, postal code, and telephone inputs where a user might need to enter punctuation or a comma being in the output.
References:
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
The official HTML5 way to handle phone numbers is:
<input type="tel">
You may not have liked the "strange input box" you got with Opera when you used<input type="number" />, but that really is the appropriate type of input area when you want to require visitors to enter a numeric value.
type="number" is HTML5 and many phones do not support HTML5.
For call link you can use type="tel" or
Special A.
You should look at CSS WAP extensions (page 56) too.
EDIT 10/2015:
Most if not ALL smart phones support HTML5 and CSS3, so type="number" is the best way.
This post is now invalid. All smartphones support HTML5 and CSS3 now, so adding type="number" does in fact prompt the number pad to pop-up. I just checked it on 2 different Android versions, and an iPhone. Just so no one in the future tries WAP instead of the correct HTML5 format.
This will work on mobile and will prevent the letter "e" (along with all other letters) from being allowed to be typed in in the desktop version of your page. type="number" by itself still normally allows "e" per spec:
<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
If you use type="number" in the above, then if you type "123" then "e" the oninput JS will replace all contents of the box. Just use type="text" if you really just want integer values.
You can control the style of keyboard that comes up on input focus, independently of the input type, with the HTML attribute inputmode. What you're probably looking for is inputmode="numeric", which shows a number pad with 0-9. There are other options, such as a number pad with # and *. See the docs linked below.
This is ideal for uses cases where type="number" would not work, such as numbers formatted with dashes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Try <input type="number" pattern="/d*">
OR
<input type="tel" pattern="/d*">
This will help if you working with Android.