Text Field

Introduction to Text Field

The Text field item will renders as an HTML Form Element.

It defines as that what is entered into a text field shows up as same on the screen.  It consists of below settings as

Text Field Setting
Value Required 
If the select as If select Yes and the page item is visible, Oracle Application Express automatically performs a NOT NULL validation when the page is submitted.
Submit when Enter Pressed 
This option helps the user as if Select Yes to submit the page when ENTER is pressed.
Does not save state 
This option help the user that if Select “Yes” to suppress text entered into the field and not save the value in session state.




For security reasons user should always set this attribute to Yes.
Learning Objective

The Text Field item can able to renders the content entered in the “Custom attributes” as HTML so we can display the Upper Case, Lower Case & Caps Lock Indicator, we can build a customized solution using this functionality of Text field. Below is a use case for Text field:

Use case for Text Field:

Requirement:
  1. Auto Upper Case Conversion
  2. Auto Lower Case Conversion
  3. Caps Lock Indicator
1.Auto Upper Case Conversion

Solution:

You could achieve this using HTML and JavaScript in Oracle APEX page item “Custom attributes Section” section. Let us see the step by step process to achieve this.

Step 1: Create a page item and set the type as Text Field.



Default Text Field:



Step 2: Add the below script in Page item advanced   “Custom attributes Section of the text field



Sample Code:

onkeyup="this.value = this.value.toUpperCase();"

Output:

Now UI of the Text Field is as follows:



2..Auto Lower Case Conversion

Solution:

You could achieve this using HTML and JavaScript in Oracle APEX page item “Custom attributes Section” section. Let us see the step by step process to achieve this.

Step 1: Create a page item and set the type as Text Field.



Default Text Field:



Step 2: Add the below script in Page item advanced   “Custom attributes Section of the text field



Sample Code:

onkeyup='this.value=this.value.toLowerCase();'

Output:

Now UI of the Text Field  is as follows:



3.Caps Lock Indicator

Solution:

You could achieve this using HTML and JavaScript in Oracle APEX page item “Custom attributes Section” section. Let us see the step by step process to achieve this.

Step 1: Create a page item and set the type as Text Field.



Step 2: Add the below script in Page JavaScript   “Function and Global Variable Declaration “ of the Page



Sample Code:

function capLock(e){

kc = e.keyCode?e.keyCode:e.which;

sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);

if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))

document.getElementById('divMayus').style.visibility = 'visible';

else

document.getElementById('divMayus').style.visibility = 'hidden';

}

Step 3: Add the below script in Page item advanced   “Custom attributes Section “ of the text field and also add the below script in “Post text” Section.



Sample Code:

onkeypress="capLock(event)"

Post Text:



Sample Code:

<div id="divMayus" style="visibility:hidden;color:red;">Caps Lock is on.</div>

Output:

Now UI of the Text Field is as follows:



Share this post
Recent Posts

Leave a Comment

Start typing and press Enter to search