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:
-
Auto Upper Case Conversion
-
Auto Lower Case Conversion
-
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:
