I'm working with angular 4.3, I have an input field with input type number. I'm trying to restrict the user from entering any characters/letters. However, input type number is not fully supported and allows me to enter characters such as "ABCDEFG" within the input field. What would be the best approach to restrict letters?
<input type="number"/>
If number doesn't work, I usually suggest to go for <input type="text" pattern="\d+"/>.
You can of course change your pattern to anything number-related (like (\d|[1-5]\d|60) to set min to 0 and max to 60)
Related
I have an application whereby a user has to input a minimum of 15 digits in a number type textbox.
If a user enters a longer number, sometimes >= 19 digits, and then either uses the arrows on the right or the arrow keys on their keyboard, it autoformats the number to a float with e+ at the end which, obviously, isn't ideal.
<input min="0" type="number" value="7897894561234567898">
What's the best way to either remove or counteract this behaviour? Is there anything to be done, or will I have to use a text type input? (I'd rather not).
The HTML5 <input type=number> specifically uses the same Number type as JavaScript. The maximum integer value before precision is lost is 9007199254740991, which has 16 digits.
You can't handle larger integers than that as a Number in JavaScript, you have to treat it as a string.
You should use <input type=text>, along with a pattern attribute for validation, and an inputmode attribute for touchscreens. The default validation message is not useful, so the 'invalid' event should also be handled.
(Just kidding, inputmode isn't supported anywhere. You should use <input type=tel> to show a numeric keyboard on touchscreen devices.)
<form>
<input name=num type=tel
required pattern="\d+"
oninvalid="setCustomValidity('A number is required')"
oninput="setCustomValidity('')">
<input type=submit>
</form>
There's a note in the spec about credit card numbers:
The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows).
See: https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)
I need to add "0" as an allowable value which is outside the max/min range:
<input type="number" min="70" max="94" value="0" required>
I'm trying to avoid using JavaScript if possible.
It appears that the solution for input of this type is to use the pattern attribute instead of min/max.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
I don't have the exact regex off the top off my head for your case, but it should be pretty easy. (and I presume yours is only an example anyhow.)
I have a similar issue, where I have number inputs for 0-100 but also need to allow a few values with special meaning like 996-999.
I have a field for phone number but i dont want users to put like +1 but instead to write the local number .
How can i make the number to start with 6?
this is the input : how can i disable the +1 nor
If I've understod this correctly then you just might wanna add a placeholder as an element to the input, stating the user to type the local number. Another solution might be to add a value to the input. Both very simple things to add if it's the desired outcome.
<input type="text" placeholder="Write local number"/>
<input type="text" value="6"/>
Example to the two solutions:
JSfiddle
I used a minimum and maximum to make sure the phone number is correct. thanks.
so practically is kinnda the same as what i was wanting
This is what i used:
I want to prevent the user from entering non-numeric characters in a textfield for telephone number in HTML5. I tried this, but it doesn't forbid non-numeric characters:
<input type="tel" name="usrtel"><br>
I tried using type=number as well, but that gives me a up and a down arrow to increase or decrease the value, which is not useful for telephone numbers. How can I accomplish this?
You can use pattern attribute with a regex \d*
<input type="tel" name="usrtel" pattern="\d*" />
Demo (After typing in the box, just click anywhere outside the box, if you type in anything except the integers, it will show a red box, else it will stay normal)
Demo 2 (With custom message and submit button)
As you commented, you can change your pattern value to ^[0-9]{3,45}$ where user will have to input minimal of 3 digits to maximum of 45 in length.
Demo
<input
type="tel"
name="usrtel"
pattern="^[0-9]{3,45}$"
title="You can only enter numbers, with a minimal of 3 characters
upto 45 characters are accepted."
required="required"
/>
In the above markup, am using a title which will throw a custom error to your user.
I have some HTML that allows users to input a number like so:
<input type="number" min="1" name="aNumber" value="1" />
I noticed that at a certain point, the form data will change how it expresses the input -- i.e. it will change from "1000000" to "9.1e 32" when submitting the data to the server. But then I noticed at a certain point, it will simply be null.
What is the maximum value the input will still be able to send to the server?
After doing a bit of research in this jsfiddle: http://jsfiddle.net/43gW7/. It turns out that the its a 32 bit float with a range of float +/-3.4028234663e+38. When it exceeds that range, the value of the input returns null.