Prevent Numeric Input Only in Oracle APEX Page Items Using JavaScript

Posted inAPEX

In many Oracle APEX applications, we come across page items that should accept only numbers. Typical examples are mobile numbers, quantities, PIN codes, or numeric IDs. While APEX provides number item types, users can still paste or enter invalid characters in some cases.

Using a small JavaScript snippet, we can strictly restrict page items to accept numeric values only.

This article explains a simple and reliable approach using JavaScript and jQuery.

Why Not Rely Only on Item Type?

Setting a page item as Number Field helps, but it does not fully prevent:

  • Copy-paste of non-numeric values
  • Unexpected characters from some keyboards
  • Browser-specific behaviour

Client-side validation using JavaScript improves user experience and reduces bad input before submit.

Basic Requirement

  • Allow digits 0–9
  • Remove any non-numeric characters automatically
  • Prevent invalid key presses while typing

JavaScript Solution

You can use the following JavaScript code to restrict input to numeric values only.

Step 1: Assign a CSS Class

Assign a CSS class to your page item:

allow_numeric

You can do this from:

Page Item → Appearance → CSS Classes

Step 2: Add JavaScript Code

Place the below code in:

  • Page → JavaScript → Execute when Page Loads or
  • Global Page → JavaScript (if reused across pages)
Copy Code
$(".allow_numeric").on("input", function (evt) {
    var self = $(this);

    // Remove any non-numeric characters
    self.val(self.val().replace(/\D/g, ""));

    // Block non-numeric key input
    if (evt.which < 48 || evt.which > 57) {
        evt.preventDefault();
    }
});

How This Works

Let’s break it down simply:

.allow_numeric Targets all page items having this CSS class.

  • on(“input”, …) Triggers on typing, pasting, or autofill.
  • replace(/\D/g, “”) Removes everything except digits.
  • evt.which < 48 || evt.which > 57 ASCII range check for numeric characters (0–9).

This combination ensures that even pasted content is cleaned instantly.

Why This Approach Is Reliable

  • Works across modern browsers
  • Handles paste and manual typing
  • No server round-trip needed
  • Can be reused for multiple items
  • Lightweight and easy to maintain

Common Use Cases

  • Mobile number fields
  • OTP or PIN inputs
  • Quantity and count fields
  • Numeric codes without decimals

Optional Enhancements

If required, you can extend this logic to:

  • Allow decimals
  • Limit length
  • Show inline error messages
  • Combine with server-side validation

#orclapex

Tags: