its an odd behavior. m using input field field where type is number
and if i enter 1230 model value remains -> 1230
but as i type 01 its becomes -> 1
where as i can see 01 in input value . so this something to do with angular js
i need 00 in model because its user phone number and number type is to stop user from entering text
any help will be appreciated
https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
test can be run at angular site
The type number allows you to enter +-,.. So you cannot achieve your goal of preventing the user from entering "invalid" numbers in the first place.
It's also not very user friendly, as telephone numbers are often formatted using spaces and braces. A user can no longer copy and paste such values into the input field. Digits in phone numbers can also be represented by letters btw. 123-HELLO is equal to 12343556.
Please note that there's also an input type tel. It's not particularly useful but semantically more appropriate.
If you only want to save and display the value then use the input as is. It doesn't make much sense to force a user to adhere to your preferred pattern. Adding pattern or ngPattern allows you to use regular expressions to limit the possible characters. If you need the plain number then strip all non-numeric characters - and possibly convert roman letters to numbers - before usage.
Related
I'm trying to set the number of decimals at 2 in an input. When I type a comma in it, the value becomes NaN so I would like get my number instead of this.
TS
#ViewChild('number') input;
limitNbOfDecimals() {
var regex =
this.form.number.search(/^(\d+(?:[\.\,]\d{0,2})?)$/) == 0
? true
: false;
if (regex == false) {
// Convert the value to a number
var nb: number = +this.input.nativeElement.value;
//set decimals at 2
this.input.nativeElement.value = nb.toFixed(2);
}
}
HTML
<input class="form-control" type="text" [(ngModel)]="form.number"
#number
name="number"
(input)="limitNbOfDecimals()"
/>
EDIT
I manage to add a comma in the number but if I try to add more than 2 decimals after it removes the numbers after the comma like 1,11 -> 1
This isn't a full answer, in the sense of having a total solution, but hopefully helps you get to one (and it's too long for a comment).
The spec at https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number) states:
This specification does not define what user interface user agents
are to use; user agent vendors are encouraged to consider what would
best serve their users' needs. ..... a user agent designed for the
French market might display the value with apostrophes between
thousands and commas before the decimals, and allow the user to enter
a value in that manner, internally converting it to the submission
format described above.
It would seem that the only sure way - if you don't have control over what browsers your users have - of ensuring they can type numbers in the format they are used to in their local setting is to take input as type text and on each keystroke check that they have typed something valid (as you have defined it) and when they submit it convert to a decimal number.
Searching provides code for doing this, depending on exactly what your requirement is for the number formats though you may be better off coding it from scratch.
To add more than 2 decimal values, you need to tell like .toFixed(4) etc..
There are lots of questions like this on StackOverflow, but none of them captures all of my requirements in the same solution. Any help appreciated.
The problem
In my React app, I need a text box with the following characteristics:
It only allows digits to be entered - no minus signs, decimal places, letters, or anything besides just the digits 0-9.
It automatically brings up the number keypad on iOS and Android
I can further restrict the numbers that should be entered, e.g. only allow 4 digits
Leading zeroes are automatically trimmed, e.g. if a user types 02 it should correct to just 2
It allows an empty textbox, and can differentiate between empty and a value of 0
Current code
https://codepen.io/micahrl/pen/RwGeLmo
This code allows typing non-digits, and will just interpret the value as NaN. For instance, the user can type 2f or asdf and the page will say You typed: NaN.
Additionally, while the page loads initially with an empty text box, the user cannot type something and then delete it back to empty. Attempting to delete all text in the input box places a 0 in the box.
Finally, this code doesn't reliably trim leading zeroes, which causes me particular problems because I want to restrict the number to four digits. Typing 01 will not truncate the leading zero; on some browsers, typing 01111 will result in 1111, which is good enough, while on others, typing 01111 will result in 0111, which is a problem.
What I've tried
Because I have set type="number" on the input element, if there is ever a non-number added to the text box, event.target.value in setNumWrapper will be an empty string. This means I can't differentiate between a true empty string (where the user has deleted all text) and invalid input (where the user has typed a non-number, like asdf).
I could set type="text" on the input element, except that I think I need to set it to number to get the number keypad on mobile OSes like iOS and Android.
With further experimentation, and some help from #Keith in a comment, I've solved almost all my problems.
I've forked the codepen in my question and made these changes in the fork: https://codepen.io/micahrl/pen/GRjwqdO.
Checking input validity
#Keith pointed me to validity.badInput (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput). With this, I can differentiate between empty input, where a user types something then deletes it, and bad input, where the user attempts to add a non-numeric character.
That means I add this to the beginning of setNumWrapper():
if (event.target.value === "") {
if (event.target.validity.badInput) {
// Set the text box and number to the old value - ignore the bad input
inputRef.current.value = String(num);
setNum(num);
} else {
// The data in the text box was deleted - set everything to empty
inputRef.current.value = "";
setNum(NaN);
}
return;
}
I also have to make an inputRef with useRef(), and set it on the <input> element.
This solves #5 most of #1 (but see below for one remaining minor problem).
Trimming leading zeroes
All I had to do for this was use that inputRef to set the value in the <input> element at the end of setNumWrapper():
inputRef.current.value = String(newNum);
The <input> element's value is always a string anyway, and casting the number to a string removed leading zeroes, if there were any.
Remaining problem: invalid input is allowed if the text box is empty
When the text box is empty, the user can type non-numeric characters into it, and setNumWrapper() doesn't even fire. If you put a console.log() at the top of setNumWrapper(), it won't print anything to the log if the user types a letter, but it will print to the log if the user types a number.
This means I cannot use setNumWrapper() to solve this problem.
However, it's also relatively minor. On mobile, the number keypad comes up, preventing non-numeric input. On the desktop nothing stops the user from typing letters with their keyboard, but for my app, it's clear that only numbers are allowed, so this is good enough for now.
Still, if there's a way to fix this, I'd be curious to hear about it.
I have textboxes where a user can insert some numeric values. These textboxes have up to 9 decimal places (I use metric system):
0,000000000
Right now, in order to type 50,000000000, one must type 5 then a bunch of zeros, clearly not the best solution. I would like to allow my user to type 5 then press comma and directly be able to type any decimal value he wanted.
How can I achieve that using javascript and/or jquery?
I have angularjs single page application. In the form, there are several input fields controls which can have either any text values e.g. ($12,345 NEDRO) or it can have only amount(e.g. $1,234,567.25). Now if it's only amount then I would like to format to proper currency (which is only $), with commas if user just inputs the number which can be integer or decimal. For example, if user enters 100000, it should be automatically converted to $100,000 either when user leaves the input field or while typing. If user enters the number with proper format e.g. $123,456.34, then no changes required.
What's the best way to handle it? And can someone please provide the code for it.
I'm using NitroPDF to make custom forms and I have a problem....
Although NitroPDF allow me to format numbers using Arbitraty Mask, it only allow to use one custom pattern. But in my country, landline numbers have less numbers than cellphone numbers.
For example:
Landline: (99) 9999-9999
Cellphone: (99) 99999-9999
How could I let NitroPDF identify and apply mask based on field size, using javascript?
I don't know if this Arbitraty Mask allow me to do something like:
(99) 9999-9999 or (99) 99999-9999
Can someone help me? :)
Could you just specify the amount of digits you want with a limiting range?
(\(\d{2}\) \d{4,5}-\d{4})
So this looks for exactly two digits inside of parenthesis, followed by a space. Then it checks for either four or five digits. Finally, it looks for a dash followed by exactly four more digits.
Here is a demo