Working with Edit Boxes and Long Edit Boxes

When working with edit boxes and long edit boxes, the relevant, common fluid properties apply, but also you can set these properties:

Term Definition

Term	Definition
Application-Specific Styles: Style Classes	Similar to classic pages, when the character counter is enabled, it is displayed beneath the bottom right corner of the long edit box. If you want the character counter to be displayed beneath the bottom left corner, use the psc_counter-left style. Oracle recommends that you do not use a psc_control-width*pct style to control the width of the long edit box itself because you will then need to develop and apply custom styling to get the character counter aligned with the long edit box.
Place Holder Text	Display default, place holder, text in the edit box as follows: None: Disables the display of place holder text. Static: Select to enable the Static Text box, and enter the desired text. Message Catalog: Select to enable the Message Set/Number boxes. Enter the message set and message number of the message catalog entry that contains the place holder text. For example, you can add a default value or sample format of the field data to assist users. HTML example: `<input type="text" id="PS_APP_END_DATE" class="ps-edit" placeholder="Specify the date you expect to finish the assignment." value="" maxlength="10" ...>`
Input Properties	Select the expected data type for users to input. This sets the HTML input type parameter. Setting input types for forms allow for better input control and validation for various data types, including: text color date datetime email number range search time url Note: The Input Properties setting does not apply to long edit boxes.

Application-Specific Styles: Style Classes

Similar to classic pages, when the character counter is enabled, it is displayed beneath the bottom right corner of the long edit box. If you want the character counter to be displayed beneath the bottom left corner, use the psc_counter-left style. Oracle recommends that you do not use a psc_control-width*pct style to control the width of the long edit box itself because you will then need to develop and apply custom styling to get the character counter aligned with the long edit box.

Place Holder Text

Display default, place holder, text in the edit box as follows:

None: Disables the display of place holder text.
Static: Select to enable the Static Text box, and enter the desired text.
Message Catalog: Select to enable the Message Set/Number boxes. Enter the message set and message number of the message catalog entry that contains the place holder text.

For example, you can add a default value or sample format of the field data to assist users.

HTML example:

<input type="text" id="PS_APP_END_DATE" class="ps-edit" placeholder="Specify the date you expect to finish the assignment." value="" maxlength="10" ...>

Input Properties

Select the expected data type for users to input. This sets the HTML input type parameter.

Setting input types for forms allow for better input control and validation for various data types, including:

text
color
date
datetime
email
number
range
search
time
url

Note: The Input Properties setting does not apply to long edit boxes.

Note:

The Show Label option is not supported for edit boxes on fluid pages.

Note:

The Display in Modal Window option is not supported for long edit boxes on fluid pages. Therefore, the character limit counter cannot be displayed for long edit boxes in fluid grids.

Working with Color Fields

When you select color as the Input Type, the system uses a text field in #rrggbb hexadecimal format.The value of an input element of type color is a string which is a 7-character string specifying an RGB color in hexadecimal format. If you don't specify a value, the default is #000000, which is black.

Working with Number Fields

When you select number as the Input Type, the system uses an HTML 5 number input which renders in a fashion specific to the browser/device accessing the page. For example, on a touch device the system displays the numeric keyboard when the number field is in focus, and a browser may display a spinner (spin-button) for a number field.

Note:

Browser rendering and HTML 5 rendering may change after the publication of this document.

When setting Input Type to number, consider that HTML 5 restricts the data that can be used as input or displayed for number fields to the following set of characters:

0 through 9.
- for negative numbers.
. for a decimal point.

Adding additional characters (such as a currency symbol, a thousand’s separator, and so on) or additional field formatting is not supported for a field with the Input Type set to number. For example, if you set Input Type to number, the numeric keyboard will be displayed by default for that field on touch devices, however you also introduce the HTML 5 number field character restrictions. In this case, any special characters or formatting applied in Edit Box Properties, field definition formatting, or PeopleCode (such as currency symbols, thousands separators, and so on) will not be displayed or accepted as input for that field.

On the other hand, if you want to allow additional formatting or characters for numerical values, then set the Input Type to text, keeping in mind that with the Input Type set to text you lose the device/browser-specific representation (such as the numeric keyboard for example).

A general recommendation would be that you should only set a field's Input Type to number if the underlying field definition Field Type is set to Number in Application Designer, or if the Field Type is set to Character, you have also set the Format Type to Numbers Only.

Related Topics

Application Designer Developer’s Guide: Using Edit Boxes and Long Edit Boxes