In this Oracle Apex tutorial, you will learn how to format a number with comma and decimal using JavaScript. In Oracle Apex, for a text field or a number field, there is a property Format Mask, in which you can specify the number format with comma and decimal for the currency fields, but it shows after the page load and usually we require it to show when user moves to the next field by pressing the Tab key or using the mouse. To achieve this functionality in Oracle Apex, we can use the JavaScript method Number(value).toFixed() on the onfocusout or onblur event. Below are the examples:
Format Number with Comma and Decimal Using JavaScript Example
In the following example, we will use the JavaScript method Number(value).toFixed().replace() on focusout event to format the number into the currency format. Follow these steps:
Click on the Number Field in Oracle Apex page designer, for which you want to apply the format mask, then in the properties advance section paste the following JavaScript code in the Custom Attributes. Also, shown below in the image below:
onfocusout="this.value=Number(this.value).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')"
Now when the user will press the Tab key or will use the mouse to navigate to the next field, this field value will be formatted with commas and 2 decimal places. If you want to change it to show 4 decimal places then use toFixed(4).
JavaScript to Format a Number with 2 Decimal Places in Oracle Apex
To format a number with 2 decimal places without the comma, use the following JavaScript code in the Customer Attributes section:
onfocusout="this.value=Number(this.value).toFixed(2)"
Here in both examples, I used the onfocusout JavaScript event, you can also use the onblur JavaScript event for the same code. Below is the example:
onblur="this.value=Number(this.value).toFixed(2)"
Hi Vinish,
If it's numeric field, it is returning error with field must be numeric
You can change item type to Text Field and set alignment to right, then the error will not occurred.
Or in numeric type field try specifying the format mask as below:
999G999G999G999G990D00
How can I divide the values of a column (Ex. 00000048 / 10000) in same column? I've made it work in the SELECT statement, but when I try to save changes, the error message says that "Virtual Columns are not allowed".
Click on the column you created, then in the Source section of property pallet make it as Query Only.
Hi Vinish,
I use Android device to add Decimal number in item. I use inputmethod="decimal" to get numeric keyboard. My problem is that semicoln on keyboard is not working properly: comma is typed instead. Do you have other fix than simply replace comma after lose-focus on item?
I tried but it did not work on my application. If I try the amount 18.211,32 or 18211,32 or 18,211.32 it returns an error. If only works if I try 18211.32, then it converts to 18,211.32.
My field is a numeric one with the mask you recomended (999G999G999G999G990D00).
The problem is on the onfocusout which is not "understanding" the comma if the user paste or type on the field.
The correct is to replace comma for dot and the dot for comma. As I am in Brasil where the format is 0.000,00, the user, usually copy the amount from an document and paste directly to the form. But I have to convert do USD which use the forma 0,000.00.
How can I do it? I already tried an SQL function replace but without sucess.
How about phone number mask 999-999-9999 ?