How do I use JavaScript for number formatting? - javascript

I want to use JavaScript to restrict input on a text box to currency number formatting. For example:
<input type="text" value="2,500.00" name="rate" />
As given above, the text box should accept only numbers, commas and a period.
But, after the period it should accept two digits after numbers.
How do I accomplish this? Please clarify.
Gnaniyar Zubair

parseFloat can convert a string to a float and toFixed can set how many decimal places to keep.
function numToCurrency(num){
return parseFloat(num).toFixed(2);
}
numToCurrency("4.2334546") // returns 4.23

If you want to do validation for your textbox, you can use Regular Expressions. If you want to restrict the input from the user, you can trap the keystrokes and filter out the ones you want them to enter using the onKeyDown event of the textbox.

These jQuery plugins can help..
http://www.texotela.co.uk/code/jquery/numeric/
http://plugins.jquery.com/project/aphanumeric

You could use a jQuery's plugin called Alphanumeric
jQuery AlphaNumeric is a javascript
control plugin that allows you to
limit what characters a user can enter
on textboxes or textareas. Have fun.

Related

How can i restrict entering more than one dots in input type number field in react js?

Only one dots will allow in input type number field in react JS.
Anyone please???
You can use the following regex to apply validation
(/\.\./g).test("12..3")
(/\.\./g).test("12.3")

Angular/javascript show always 3 decimals in input

I'm using angular and i want to show data to users with html input type="number"
<input type="number" step="0.001" class="form-control" style="width: 75px" ng-model="product.price" />
I always want to show 3 decimal places. But The source where the data comes, has sometimes
value:1.01 -> i need 1.010
value:1.004 -> i need 1.004
value:1 -> i need 1.000
I've tried .toFixed(3), but this returns a string, which is not what i need( cant show that in input type number)
Tried to parseFloat(mynumber.toFixed(3)), but this will again remove the extra zeroes.
Maybe there's a way to mask the input, show some extra decimals if not present ?
Angular filters do not work on input elements. Here is an example of a directive that adds number formatting to an input using the ngModel $parsers and $formatters.
You can use the number Angular filter for such a purpose: https://docs.angularjs.org/api/ng/filter/number
Still without an answer. As far as i've read it's a problem within the community, that the extra zeroes get removed , if input type=number.

HTML5: additional chars in input with type="number"

In our app, we have many inputs that are used to fill in school grades. Till now we had
<input type="text" name="mark">
As we're trying to use new features of HTML5, we changed it to
<input type="number" name="mark">
so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.
Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?
EDIT:
Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.
I believe you can use the pattern attribute for what you described:
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
e.g. <input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">
will result in an input element that allows only 3 characters.
Unfortunately, custom keys are not allowable I believe, so you would have to use a text type that has an added numeric pattern with the attribute above.
Custom keyboards would have to be used for non-standard keyboard layouts/input buttons.
You would probably want just normal text field and use something like JQuery Validate to limit the input and throw warnings if a user enters incorrect data.
Another option would be to trow all possible option into a HTML select tag.
JQuery Validate plugin: http://jqueryvalidation.org/
you can use
<input type="text" name="mark" pattern="[a-z0-9]{2}">
You can specify your regular expression in the pattern and have any character whitelisted
For having 50+ kind of input use the following
<input type="text" name="mark" pattern="[0-9]{2}[+]?">
You could simply use,
<input type="tel" name="mark">
This would do it.

Javascript or Jquery - restricting input field to only 8 decimals

Is it possible to restrict a form field in HTML with Jquery/Javascript to only 3 decimals . What I mean is that: 33.334 should be allowed as input 3.344 & 444444.556 etc. as well but it should not allow 5.6664 etc.
How can I do that?
You don't need jQuery to do that. Just use pattern attribute of <input> like this
<input type="text" pattern="^\d+\.\d{0,3}$">
The above would work on most browsers but if you want to support some old browsers, you would bind that <input> on a key-based event and check for the value using the above regex and restricting the user input.
$('input').on('blur', function () {
if (!/^\d+\.\d{0,3}$/.test($(this).val())) {
alert("Must be a number upto 3 decimals!");
}
});
DEMO
Press Enter to see pattern in action. Click elsewhere to see jQuery in action

iPhone adds commas to input number field due to JavaScript

We have an order form which takes credit cards from mobile browsers: <input type="number" id="txtCCNumber" />
Also in addition to that we have a JavaScript which removes any non-integer characters that are inserted into the field:
$('input#txtCCNumber').keyup(function(e)
{
var ccnum = $(this).val();
$(this).val(ccnum.replace(/[^\d]/g, ''));
});
However we just realized that it appears that when people using an iPhone try to put their credit card in, iPhone automatically adds a comma every 3 numbers (because of the JavaScript).
Does anybody know a way to fix this JavaScript so it works?
I do not want to use type="tel". That is not a solution in this case.
Personally, I don't think credit card numbers are an appropriate use of input type="number". According to the spec:
The input element with a type attribute whose value is "number" represents a precise control for setting the element’s value to a string representing a number.
Credit card "numbers" are strings of digits, but they don't identify a particular numeric value, and it wouldn't make sense for a user to enter a credit card number using the up and down arrows that some browsers attach to the input field. Your best bet is simply to use input type="text".
Also, attaching that JavaScript to the keyup event is going to annoy people like me who want to enter their credit card number with separators because it's easier to spot check. Just let people enter their card number however they like and normalize it later.
I don't see a reason why you're using type="number" for a Credit Card number field since you're anyways removing non integer values using JS. Using type="text" would be apt here.
I created a fiddle and tested this on my iphone and it works properly.
http://jsfiddle.net/MH8gj/

Categories