An text input component where user interaction is restricted by an input mask. For each position in the string, the input mask determines if it must be a specific character, or if it is restricted to a specific category of characters. If the user attempts to type a character that is not allowed at a specific position, their input will be ignored.

The following categories of characters are available to compose an input mask:

  • 0 — Digit (required). Any numeric digit between 0 and 9. Equivalent to the regular expression [0-9].
  • 9 — Digit or space (optional). If the value is a space, the text property skips it.
  • # — Digit, space, + (plus), or - (minus) (optional). If the value is a space, the text property includes it. Allows + and - characters too.
  • L — Letter (required). Any letter in the ranges a-z and A-Z. Equivalent to the regular expression [a-zA-Z].
  • ? — Letter (optional). Equivalent to the regular expression [a-zA-Z]?.
  • & — Character (required). Similar to L, but allows non-control characters outside the range of a-z and A-Z.
  • C — Character (optional). Similar to ?, but allows non-control characters outside the range of a-z and A-Z.
  • A — Alphanumeric (required). Any numeric digit between 0 and 9, and any letter in the ranges a-z and A-Z.
  • a — Alphanumeric (optional). Any numeric digit between 0 and 9, and any letter in the ranges a-z and A-Z.

For a US Social Security number, an appropriate input mask is 000-00-0000.

For a US ZIP Code, appropriate input masks include 00000 and 00000-9999 (for ZIP+4).

Events:

openfl.events.Event.CHANGE

Dispatched when MaskedTextInput.text changes.

openfl.events.Event.SCROLL

Dispatched when MaskedTextInput.scrollX changes.

Available since

feathersui-text-inputs-pack 1.0.0

.

Static variables

@:value("maskedTextInput_errorCallout")staticfinalread onlyCHILD_VARIANT_ERROR_CALLOUT:String = "maskedTextInput_errorCallout"

The variant used to style the error string TextCallout child component in a theme.

To override this default variant, set the MaskedTextInput.customErrorCalloutVariant property.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

Constructor

@:value({ text : "" })new(text:String = "", ?prompt:String, ?changeListener:Event ‑> Void)

Creates a new MaskedTextInput. object.

Available since

feathersui-text-inputs-pack 1.0.0

.

Variables

@:style@:flash.propertyautoSizeWidth:Bool

Indicates if the text width is considered when calculating the ideal size of the text input.

The following example changes the text input's auto size behavior:

input.autoSizeWidth = true;
Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertybackgroundSkin:DisplayObject

The default background skin for the text input, which is used when no other skin is defined for the current state with setSkinForState().

The following example passes a bitmap for the text input to use as a background skin:

input.backgroundSkin = new Bitmap(bitmapData);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

read onlybaseline:Float

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

  • feathers.controls.ITextControl.baseline

@:bindable("stateChange")read onlycurrentState:TextInputState

The current state of the text input.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

  • feathers.controls.TextInputState

  • FeathersEvent.STATE_CHANGE

@:style@:flash.propertycustomErrorCalloutVariant:String

A custom variant to set on the error callout, instead of MaskedTextInput.CHILD_VARIANT_ERROR_CALLOUT.

The customErrorCalloutVariant will be not be used if the TextCallout already has a variant set.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertydisabledTextFormat:AbstractTextFormat

The font styles used to render the text input's text when the text input is disabled.

In the following example, the text input's disabled text formatting is customized:

input.enabled = false;
input.disabledTextFormat = new TextFormat("Helvetica", 20, 0xee0000);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

editable:Bool

Indicates if the text input is editable.

The following example disables editing:

textInput.editable = false;
Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertyembedFonts:Bool

Determines if an embedded font is used or not.

In the following example, the text input uses embedded fonts:

input.embedFonts = true;
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

errorCalloutFactory:AbstractDisplayObjectFactory<Dynamic, TextCallout>

Creates the error callout, which must be of type feathers.controls.TextCallout.

In the following example, a custom error callout factory is provided:

textInput.errorCalloutFactory = () ->
{
	return new TextCallout();
};
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

  • feathers.controls.TextCallout

errorString:String

Error text to display in a TextCallout when the text input has focus. When this value is not null the text input's currentState is changed to MaskedTextInput.State.ERROR.

An empty string will change the background, but no TextCallout will appear on focus.

To clear an error, the errorString property must be set to null.

The following example displays an error string:

input.errorString = "Something is wrong";
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

read onlyerrorStringCalloutOpen:Bool

Indicates if the callout for the errorString is currently open or closed.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

inputMask:String

Specifies the character types and positions that the text property must satisfy.

  • 0 — Digit (required). Any numeric digit between 0 and 9. Equivalent to the regular expression [0-9].
  • 9 — Digit or space (optional). If the value is a space, the text property skips it.
  • # — Digit, space, + (plus), or - (minus) (optional). If the value is a space, the text property includes it. Allows + and - characters too.
  • L — Letter (required). Any letter in the ranges a-z and A-Z. Equivalent to the regular expression [a-zA-Z].
  • ? — Letter (optional). Equivalent to the regular expression [a-zA-Z]?.
  • & — Character (required). Similar to L, but allows non-control characters outside the range of a-z and A-Z.
  • C — Character (optional). Similar to ?, but allows non-control characters outside the range of a-z and A-Z.
  • A — Alphanumeric (required). Any numeric digit between 0 and 9, and any letter in the ranges a-z and A-Z.
  • a — Alphanumeric (optional). Any numeric digit between 0 and 9, and any letter in the ranges a-z and A-Z.
Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertyleftView:DisplayObject

An optional view displayed inside the text input, to the left of its text.

The following example passes a bitmap for the text input to use as a left view:

input.leftView = new Bitmap(bitmapData);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertyleftViewGap:Float

The gap between the left view and the text.

The following example sets the left view's gap to 20 pixels:

input.leftViewGap = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

measureText:String

If not null, the dimensions of the measureText will be used in the calculation of the text input's width. If the text input's width hasn't been set explicitly, its calculated dimensions will be at least large enough to display the measureText. If other children of the text input, such as the background skin or the prompt text is larger than the width of the measureText, the text input will choose the largest required width.

Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertypaddingBottom:Float

The minimum space, in pixels, between the text input's bottom edge and the text input's content.

In the following example, the text input's bottom padding is set to 20 pixels:

input.paddingBottom = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertypaddingLeft:Float

The minimum space, in pixels, between the text input's left edge and the text input's content.

In the following example, the text input's left padding is set to 20 pixels:

input.paddingLeft = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertypaddingRight:Float

The minimum space, in pixels, between the text input's right edge and the text input's content.

In the following example, the text input's right padding is set to 20 pixels:

input.paddingRight = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

@:style@:flash.propertypaddingTop:Float

The minimum space, in pixels, between the text input's top edge and the text input's content.

In the following example, the text input's top padding is set to 20 pixels:

input.paddingTop = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

prompt:String

The text displayed by the text input when the length of the text property is 0.

The following example sets the text input's prompt:

input.prompt = "Minimum 8 characters required";
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertypromptTextFormat:AbstractTextFormat

The font styles used to render the text input's prompt text.

In the following example, the text input's prompt formatting is customized:

input.promptTextFormat = new TextFormat("Helvetica", 20, 0xcc0000);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertyrightView:DisplayObject

An optional view displayed inside the text input, to the right of its text.

The following example passes a bitmap for the text input to use as a right view:

input.rightView = new Bitmap(bitmapData);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertyrightViewGap:Float

The gap between the right view and the text.

The following example sets the right view's gap to 20 pixels:

input.rightViewGap = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:bindable("scroll")scrollX:Float

The horizontal scroll position (on the x-axis) of the text, measured in pixels.

The following example changes the text input's scroll position:

input.scrollX = 20.0;
Available since

feathersui-text-inputs-pack 1.0.0

.

selectable:Bool

If the editable property is false, indicates if the text can still be selected. If the editable property is true, the text is always selectable, and this property is ignored.

The following example disables selection:

textInput.editable = false;
textInput.selectable = false;
Available since

feathersui-text-inputs-pack 1.0.0

.

read onlyselectionActiveIndex:Int

The character position of the active part of the selection. If the selection is changed with the arrow keys, the active index changes and the anchor index stays fixed. If both the active index and the anchor index are equal, then no text is selected and both values represent the position of the caret.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

read onlyselectionAnchorIndex:Int

The character position of the anchor part of the selection. If the selection is changed with the arrow keys, the active index changes and the anchor index stays fixed. If both the active index and the anchor index are equal, then no text is selected and both values represent the position of the caret.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertyshowPromptWhenEmptyAndFocused:Bool

Indicates if the prompt is shown when the length of the text is 0 and the text input is focused. Keeping the prompt visible until the user types something is considered better for usability because the user may look away for a moment and forget the prompt when they return.

The following example set the prompt to be hidden when focused and the text is empty:

input.showPromptWhenEmptyAndFocused = false;
Available since

feathersui-text-inputs-pack 1.0.0

.

@:bindable("change")text:String

The text displayed by the text input. If inputMask is set, the new text value will be validated against the mask, and an ArgumentError will be thrown if the text is not valid. If the length of inputMask is 0, then any text will be considered valid.

When the value of the text property changes, the text input will dispatch an event of type Event.CHANGE.

The following example sets the text input's text:

input.inputMask = "000-00-0000";
input.text = "123-45-6789";

The next example demonstrates that delimiters may be excluded:

input.inputMask = "000-00-0000";
input.text = "123456789";
trace(input.text); // 123-45-6789

The next example demonstrates that the text may be shorter than the mask, and prompt characters will be displayed:

input.inputMask = "000-00-0000";
input.text = "1234";
trace(input.text); // 123-4_-____
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertytextFormat:AbstractTextFormat

The font styles used to render the text input's text.

In the following example, the text input's formatting is customized:

input.textFormat = new TextFormat("Helvetica", 20, 0xcc0000);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@:style@:flash.propertyverticalAlign:VerticalAlign

How the content is positioned vertically (along the y-axis) within the text input.

The following example aligns the text input's content to the top:

input.verticalAlign = TOP;
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

  • feathers.layout.VerticalAlign.TOP

  • feathers.layout.VerticalAlign.MIDDLE

  • feathers.layout.VerticalAlign.BOTTOM

  • feathers.layout.VerticalAlign.JUSTIFY

Methods

getSkinForState(state:TextInputState):DisplayObject

Gets the skin to be used by the text input when its currentState property matches the specified state value.

If a skin is not defined for a specific state, returns null.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

getTextFormatForState(state:TextInputState):AbstractTextFormat

Gets the text format to be used by the text input when its currentState property matches the specified state value.

If a text format is not defined for a specific state, returns null.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

selectAll():Void

Selects all of the text displayed by the text input.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

selectRange(anchorIndex:Int, activeIndex:Int):Void

Selects the specified range of characters.

The following example selects the first three characters:

input.selectRange(0, 3);
Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

setPadding(value:Float):Void

Sets all four padding properties to the same value.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@stylesetSkinForState(state:TextInputState, skin:DisplayObject):Void

Set the skin to be used by the text input when its currentState property matches the specified state value.

If a skin is not defined for a specific state, the value of the backgroundSkin property will be used instead.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also:

@stylesetTextFormatForState(state:TextInputState, textFormat:AbstractTextFormat):Void

Set the text format to be used by the text input when its currentState property matches the specified state value.

If a text format is not defined for a specific state, the value of the textFormat property will be used instead.

Available since

feathersui-text-inputs-pack 1.0.0

.

See also: