Introduction: –
In Oracle APEX, browser events refer to various actions or interactions that occur within the web browser while users interact with a web page. These events are typically triggered by user actions, such as clicking a button, selecting an option from a drop down, entering text in a field, or simply loading a page. Oracle APEX provides developers with the ability to capture these events and define specific responses or actions within the application.
The Input event is a specific type of browser event in Oracle APEX that is triggered when the value of an input element (such as a text field, text area, or other input controls) changes. Unlike the “Change” event, which is only triggered after the input loses focus or when the value is committed, the “Input” event fires immediately as the user types or modifies the input content.
The following technologies has been used to achieve the same.
Oracle APEX
JavaScript
Why we need to do: –
In a real-time scenario, a customer feedback form in where users enter their comments. To improve user engagement, an “Input” browser event is attached to the comments text area. As users’ type, the “Input” event dynamically updates a character counter displayed below the field, showing how many characters they have used and how many are remaining, helping them stay within the allowed limit without needing to submit the form. This immediate feedback enhances the user experience by ensuring they don’t exceed the character limit while typing.
How do we solve:
Navigate to the Page:
Select the page containing the input element (e.g., CUSTOMER NAME) where you want to attach the “Input” event.
Add Dynamic Action:
In the Page Designer, go to the Dynamic Actions section.
Click Create to add a new dynamic action.
Configure the Dynamic Action:
- Name: Give a meaningful name to your dynamic action (e.g., “CHECK APLHABET”).
- Event: Select “Input” from the list of events. This event will trigger whenever the value of the input field changes.
- Selection Type: Choose “Item” and then select the input field (e.g., P1_CUSTOMER_NAME) from the list of items.
Set Up the True Action:
- Action: Select “Execute JavaScript Code” to run a custom script.
JAVASCRIPT CODE TO CHECK WHETHER
THE NAME IS ALPHABET OR NOT:
var inputField = apex.item(this.triggeringElement.id).getValue();
var validInput = inputField.replace(/[^a-zA-Z]/g, ”);
if (inputField !== validInput) {
apex.message.clearErrors();
apex.message.showErrors([
{
type: “error”,
location: “inline”,
pageItem: this.triggeringElement.id,
message: “Only alphabetic characters are allowed.”,
unsafe: false
}
]);
apex.item(this.triggeringElement.id).setValue(validInput);
} else {
apex.message.clearErrors(); // Clear error if the input is valid
}
Save and Run:
Save your changes in the Page Designer.
Run the page to test the dynamic action. As you type in the
P1_CUSTOMER_NAME field, any non-alphabetic characters should be
automatically removed.
Conclusion:
Browser events in Oracle APEX are powerful tools that allow developers to make web applications more interactive and responsive to user actions.
The “Input” event, in particular, is useful for capturing and responding to real-time changes in form elements, enabling features like live updates, immediate validation, and enhanced user experience.
