Creating a simple form.
Curious as to why the type='number' has different default size than type='text'?
Form looks like this. I believe with all defaults. Fiddle link below.
<form>
<label for='number' >Age:</label>
<input id='number' type='number' placeholder='Enter your age'>
<label for='name' >Name:</label>
<input id='name' type='text' placeholder='Enter your name'/>
</form>
https://jsfiddle.net/fnbkjcd3/2/
Short answer: that's just the way it is. Different browsers can - and will - implement different <input> types differently - sometimes VERY differently:
Numeric Inputs – A Comparison of Browser Defaults
MDN: input The Input (Form Input) element
MDN: input type="number"
PS:
I looked at your JSFiddle in FF and Chrome and - at least for me - the text input looked identical to the number input. I'm not sure why you're seeing them rendered "differently".
SUGGESTION:
Try to set font/size explicitly in CSS, and see if that makes a difference.
In case you didn’t know, every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. So field size may vary among browsers, see the following two screenshot:
Firefox:
Chrome:
To apply a standard stylesheet among all 'user-agent' you can use cssrest.
Related
I always thought that setting type="tel" on an <input> is enough for autocomplete. Turn out not true:
Open MDN's <input type="tel"> page, look at the example. If I remove both name="phone" and id="phone", autocomplete does not work. If I remove either of them, autocomplete still works.
I think it could be considered invalid, then I add both of them, but use a different value, not phone. Autocomplete still does not work.
So maybe Chrome "guesses" what to fill bases on the name/id. My question is why they do that. Why doesn't it fill for type="tel" alone?
I use latest Chrome.
I made a page using a form with few input "number". I used the html output tag to display the result. But in MSIE, the calculations were performed, but the output tag would not display them. Is there a simple workaround or alternative? It works if i use an input tag in place of the output tag, but then the result is displayed in a box which doesn't format very nice. (I thought the solution would be rather simple, like: (-"I have variableresult apples." - )
HTML 5 output tag is not supported on IE (or EDGE). So you are stuck with using input tag. You can, however, always use CSS to fix the layout of your screen.
If you want to support IE, you would have to go the old fashion way i.e. use JS with CSS
Output tag is not supported by MSIE or Edge according to W3Schools, a solution using Javascript can be found here. Additionally you can just use CSS to style the output-input as you wish.
I write a code might helps you, because I didn't clear with your question.
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>
I made simple calculator.
OUTPUT tag will not support in IE.
If I have a HTML file with the tag <input type="text" size="3" …>it does what it should do, it renders an input element with the width of 3 characters. On the other hand, if I have the tag <input type="number" size="3" …> it renders the default width for an input field (much longer than 3 chartacters).
I know I can make a custom class with a .myclass { width: 75px; }, but I think it would be much easier to use the size attribute, specially if I know for a number field that the numbers accepted will be from 0 to 100, why to use a wider input field?
Is this done by design? Am I required to use CSS for this? If that so, how can I render an input field of exactly three characters wide according to the font family/size I'm using in the form?
Size is not an attribute for input type=number, it has min and max attribute to specify minimum and maximum number. To adjust width you will have to use width style.
I just tested the following:
<input type="number" size="20" min="1" max="5"/>
The size attribute didn't respond on Chrome or FireFox, but very surprisingly it did work on Internet Explorer 11.
My guess is it's still in the process of receiving global compatibility, and I would recommend creating a css class to handle the width as you so desire.
Here is a fiddle of the code for testing purposes.
<input type="number" min="1" max="5">
Is this what you are looking for? Other then that, I haven't found anything that would resize the input. I think the best thing to do is use css in your css file or add style="" to the input field.
This seems to work for me.
<input type="number" size="3" max=1 min=5>
Edit. Need to add min and max for size to work.
CodePen: http://codepen.io/leongaban/pen/hbHsk
I've found multiple answers to this question on stack here and here
However they all suggest the same fix, using type="number" or type="tel"
None of these are working in my codepen or project :(
Do you see what I'm missing?
Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.
Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.
If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUp event).
You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.
It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:
input:invalid {
border:1px solid red;
}
I use a dirty bit of JS inline, it's triggered upon paste/keying (input).
Within your input tag add the following:
oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
All it's doing is replacing any character not 0-9 with nothing.
I've written a tiny demo which you can try below:
Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>
Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form> tags like this:
<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />
<br/>
<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>
<br/>
<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]" title="Title"/>
</form>
Just add a check to the onkeypress event to make sure that the no alphanumeric characters can be added
<input
type="text"
placeholder="Age"
autocomplete="off"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
maxlength="10"
/>
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.