Question

125

HTML 5 Currency format

rated 0 times [ 127] [ 2] / answers: 1 / hits: 114616 / 11 Years ago, mon, august 19, 2013, 12:00:00

I am using lots of HTML 5 input controls in my pages. One of my requirement is to have a textbox with currency feature. For this i tried this:

<input type=number pattern=(d{3})([.])(d{2}) />

This allows me to type values like 10,000.00

But still all its not meeting all my requirements. I want that if the user types in 10000
it should convert it to currency format like 10,000 onblur.

And when i read the value from the input type in my Javascript, it should give me a float instead of a string value which i cannot use to calculate without parsing.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

eanskylerg questions

1 React Router v6 : How to render multiple component inside and outside a div with the same path

Sat, Feb 19, 22, 00:00, 2 Years ago

1 dotenv: command not found in nestjs project

Sat, Oct 30, 21, 00:00, 3 Years ago

1 How can I resolve the TypeScript Compiler error Namespace 'NodeJS' has no exported member 'Global'?

Mon, Jul 5, 21, 00:00, 3 Years ago

1 Limit x-axis in Apexcharts.js

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Cannot use import statement outside a module in Vuejs. Template Django

Sat, Jan 23, 21, 00:00, 3 Years ago

View All

answered 11 Years ago mitchell · Accepted Answer

Here's a workaround with an additional input type=text:

http://jsfiddle.net/UEVv6/2/

HTML

<input type=text id=userinput pattern=[0-9]*>

<br>

<input type=number id=number>

JS

document.getElementById(userinput).onblur =function (){    



    //number-format the user input

    this.value = parseFloat(this.value.replace(/,/g, ))

                    .toFixed(2)

                    .toString()

                    .replace(/B(?=(d{3})+(?!d))/g, ,);



    //set the numeric value to a number input

    document.getElementById(number).value = this.value.replace(/,/g, )



}

regex is from here How to print a number with commas as thousands separators in JavaScript