Restrict Search Input to Alphanumeric Characters in Oracle APEX Interactive Grid and Interactive Report

Introduction

The search box in an Interactive Grid (IG) or Interactive Report (IR) accepts any character by default. In some applications, business rules require end users to enter only letters (a-z, A-Z) and numbers (0-9) when using the All Text Columns search option. Special characters such as @, #, % or ' should not be allowed.

Oracle APEX does not provide a declarative setting — such as an input mask or pattern — for the built-in search field. In this post, we implement the restriction with a small, reusable JavaScript file that applies to every Interactive Grid and Interactive Report in the application automatically.

Requirement

• The search field must accept only a-z, A-Z and 0-9 (spaces allowed, optional).
• The restriction must work for typing, pasting and drag-and-drop.
• It must apply to all pages automatically, with no per-page setup.
• It must cover both Interactive Grid and Interactive Report.

Approach

Oracle documents the Interactive Grid JavaScript API as the supported way to customize the grid beyond what Page Designer offers. The search field is the search_field element of the grid toolbar, and it can be reached with:

javascript

apex.region("my_ig").call("getToolbar").toolbar("findElement", "search_field");

However, calling this on every page means repeating code. A better approach is event delegation: attach the handlers once to document, and match any search field inside an IG or IR. Because the handlers are delegated, they keep working even when the toolbar or report is re-rendered by an Ajax refresh.

Two-Layer Strategy

The solution uses two complementary event handlers:

• A keydown handler that blocks disallowed characters as the user types.
• An input / paste handler that cleans the field as a safety net for pasted text, drag-and-drop, autofill, and mobile keyboards.

Step 1: Create the JavaScript File

Go to Shared Components > Static Application Files and create a file named search_restrict.js with the following content:

search_restrict.js

(function ($) {
    "use strict";

    // Interactive Grid + Interactive Report search fields
    var SEARCH_SELECTOR = ".a-IG [id$='_search_field'], .a-IRR [id$='_search_field']";

    // Block disallowed characters while typing (letters, numbers, space allowed)
    $(document).on("keydown", SEARCH_SELECTOR, function (e) {
        if (e.ctrlKey || e.metaKey || e.altKey || (e.key.length > 1 && e.key !== " ")) return;

        if (!/^[a-zA-Z0-9 ]$/.test(e.key)) {
            e.preventDefault();
        }
    });

    // Safety net for paste, drag-drop, autofill, mobile keyboards
    $(document).on("input paste", SEARCH_SELECTOR, function () {
        var el = this;
        setTimeout(function () {
            var cleaned = el.value.replace(/[^a-zA-Z0-9 ]/g, "");
            if (el.value !== cleaned) {
                el.value = cleaned;
            }
        }, 0);
    });
})(apex.jQuery);

Step 2: Reference the File in the Application

Go to Shared Components > User Interface Attributes > JavaScript and add the following to File URLs:

APEX — User Interface Attributes > File URLs

#APP_FILES#search_restrict.js

Every page that contains an Interactive Grid or Interactive Report now gets the restriction automatically, including pages you create in the future.

How the Code Works

Part	Purpose
.a-IG [id$='_search_field']	Matches the search input inside any Interactive Grid.
.a-IRR [id$='_search_field']	Matches the search input inside any Interactive Report.
$(document).on(...)	Delegated binding, so it works for every region and survives Ajax refreshes.
keydown handler	Blocks any single character that is not a-z, A-Z, 0-9, or space. Shortcuts (Ctrl+C, Ctrl+V) and navigation keys (Backspace, arrows, Enter) are allowed.
input paste handler	Strips disallowed characters from whatever ended up in the field.
setTimeout(..., 0)	Lets pasted text land in the field before it is cleaned.

Disallow Spaces Too?

To disallow spaces as well, remove the space from both patterns: use /^[a-zA-Z0-9]$/ in the keydown check, /[^a-zA-Z0-9]/g in the cleanup, and drop the e.key !== " " condition.

Testing

1. Open a page with an Interactive Grid and hard-refresh the browser (Ctrl+Shift+R) so the new file is loaded.
2. Type abc@#12. Only abc12 should appear.
3. Paste hello%world!. The field should show helloworld.
4. Repeat the test on a page with an Interactive Report.

To confirm the selectors match on your page, run this in the browser console:

Browser Console

$(".a-IG [id$='_search_field']").length   // Interactive Grid
$(".a-IRR [id$='_search_field']").length  // Interactive Report

A result of 1 or more means the handlers are attached. If you get 0, inspect the search box in the browser developer tools and adjust the selector to match its id and class.

Troubleshooting

• Grid does not appear after adding the code. This happens if the code is pasted into the region's JavaScript Initialization Code attribute. That attribute expects a function of the form function(options) { ... return options; }. Use the static application file approach above instead.
• Changes are not visible. The browser is serving a cached copy of the file. Hard-refresh, or append a version to the URL — for example #APP_FILES#search_restrict.js?v=2.
• Duplicate behavior. Remove any older per-page versions of the code so that two handlers do not conflict.

Things to Keep in Mind

Important Limitations

• This is a client-side restriction. A technical user can bypass it from the browser console. APEX passes the search text to the database as a bind variable, so this is a usability control rather than a SQL injection defence. If strict enforcement is required, validate on the server side as well.
• Only the main search box is covered. The column filter dialogs and Actions menu inputs use different fields and are not restricted.
• After upgrading APEX, retest on a development copy first. The selector relies on how APEX builds the search field's HTML id, which is an internal rendering detail. If it ever stops working, the failure is harmless: the search box simply behaves like the default one.

Conclusion

With one static JavaScript file and a single File URL entry, you can restrict the search input of every Interactive Grid and Interactive Report in your Oracle APEX application to alphanumeric characters. The approach uses delegated events, needs no per-page configuration, and is easy to maintain or extend.

Reference

• Oracle APEX JavaScript API documentation, interactiveGrid widget:
  https://docs.oracle.com/en/database/oracle/apex/24.2/aexjs/interactiveGrid.html