02Jun
auto-select
By: Reginald Horacius On: June 2, 2016 In: JavaScript, Oracle APEX Comments: 3

Imagine you have ten fields of text to modify and that you have to press delete each time before entering the new amount. The user experience during data entry can be improved by auto selecting the content of a text field before the user starts typing. That will prevent the user from having to clear the field themselves by using the backspace button.

This feature can easily be achieved in Oracle APEX with some basic JavaScript.  All that’s required is to create a dynamic action On Click on your text field and use the following JavaScript code in your true action:

Auto-Select JavaScript

var fieldLength = Number(this.triggeringElement.value.length); //Get the content’s length

//select the whole content of the field
this.triggeringElement.selectionStart = 0;
this.triggeringElement.selectionEnd = fieldLength;

The reason why On Focus isn’t used is because the same code does not work on iOS devices as of this writing. The drawback of using On Click instead of On Focus is that when tabbing through fields, they won’t be auto selected.

Best practice would be to have your dynamic action on your Global Page and making it affect a certain class, by using a jQuery selector – similar to this:

Auto-Select Input Number

If the auto select behavior is not required when running the application from a desktop, you could always put a condition on the dynamic action based on the device used. This can be done by reading the HTTP User Agent.

Amongst other things, the User Agent provides information on the browser used by the user.  As a result. the condition could look like this:

Auto-Select PL/SQL

upper(OWA_UTIL.GET_CGI_ENV(‘HTTP_USER_AGENT’))LIKE‘%MOBILE%’

The condition could be more specific, but since most mobile device browsers have the keyword, mobile, in their User Agent info, this condition is a safe assumption.

Note: For those wondering why didn’t I simply use jQuery’s select() method to select the text field, well, for some reason it didn’t work on iOS devices….*sigh*

Learn more about APEX

3 Comments:

    • Erica Harris
    • June 02, 2016
    • Reply

    It’s examples like these that are giving me the confidence to start using JavaScript and Dynamic Actions on my own 🙂 Thanks

    • Maaz
    • July 26, 2017
    • Reply

    Thanks a lot for this example!

    • Andy B
    • February 01, 2018
    • Reply

    Just what I needed and it worked first time. Thanks.

Leave reply:

Your email address will not be published. Required fields are marked *