Secure Text Input Web Control Secure Text Input Web Control

Secure Text Input Web Control

Zack Cohen Zack Cohen

Overview

Use the Secure Text Input to collect information from a user kept in a secure source. The client-side code cannot access this data. To retrieve the data, a data operation must be used. The Secure Text input is ideal for collecting sensitive user information like Social Security Numbers or Credit Card Information. Using a Secure Text Input will prevent the front-end environment from having access to the value the user has entered.

SecureApp-SecureString-Input.png

Control Properties

Placeholder Text

Text to be displayed in the text input until the user enters the box.

Maximum Length

Determine the maximum number of characters that the input will allow.

Input Mode

Determines the mode of the keyboard for a mobile device.

  • text - (default) allows all text from a standard keyboard.
  • decimal - allows for numbers with decimals to be entered.
  • numeric - allows for numbers to be entered.
  • tel - for inputting telephone numbers.
  • search - for search inputs, the enter button the keyboard will change to "search"
  • email - for email addresses
  • URL - for entering a web URL.

These are the same standard inputs as any text input.

Format

This property determines how the text will be rendered. For example, selecting the date format and "dd/mm/yyyy" will cause the input to format a data s "04/04/2044."

Delimiter

This a character, or sequence of characters, used to separate values in the input. When a user enters this character into the secure input, it will be ignored.

Prefix

This is a base string that is part of any input entered into this box. This value is stored as part of the input the user enters by default.

No Immediate Prefix

If enabled, the prefix will not be a part of the input until the user enters a character into the input.

Raw Value Trim Prefix

If enabled, the prefix will be trimmed from the value stored in the secure string output.

Right Icon

Choose the icon to appear at the right of the input. Default is "password-visibility." If another icon is chosen, the user will not be able to toggle between hidden and shown visibility.

AutoComplete

Determine the autocomplete mode for the input. Check out MDN for more details on what options are available.

Control Actions

Value Changed

This occurs every time a character is added or removed from the Secure Text Input. Because the Secure String does not have a control property bound to, the event.value will contain the information needed to retrieve the text entered.

On Enter

Fired when the user hits the enter or submit button at the end of the input.

Styling and Theming

Secure String Input has the same styling for all text input controls.

Examples

Example 1: Password Input

A secure string input can collect a password for log into an app.

SecureApp-SecureString-Input.png

Insert a Secure Text Input. Map the event.value to an activity variable.

Further Reading