Oracle Apex - Adding jQuery.NumPad for Numeric Fields

Oracle Apex - Adding jQuery.NumPad for Numeric Fields

In this Oracle Apex tutorial, you will learn to add jQuery.NumPad for numeric fields to show a numeric pad for data entry. Follow the below steps:

Using jQuery.NumPad for Numeric Fields in Oracle Apex Example

First, download jQuery.NumPad library using the following link Download NumPad.

You will get a ZIP file. Extract it and upload the jquery.numpad.css and jquery.numpad.js files to Oracle Apex > Shared Components > Static Application Files. As shown below in the screenshot:

Upload JavaScript and CSS files in Oracle Apex.

After uploading both files, you will see in the uploaded files list, as shown below:

Oracle Apex uploaded files.

Now copy the reference of the files (#APP_IMAGES#jquery.numpad.css and #APP_IMAGES#jquery.numpad.js) and paste it to your page (File URLs section) on which you want to use the NumPad, as shown in the below image:

jQuery.NumPad configuration on Oracle Apex page.

Also, add the following code in the Execute When Page Loads section, as shown in the above:

$('.number_field').numpad({backgroundTpl: '<div style="background: aliceblue;"></div>'});

And add the below CSS code in the Inline section of the page:

.nmpd-grid{background: aliceblue;}

Now save the changes and run the page to test. You will get the output as below:

jQuery.NumPad output.

When you click on any numeric field, the numeric keypad will appear, and you can input the value using the keypad.

To customize this library more, check the following link jQuery.NumPad Library.