#
MaskedTextBox
A MaskedTextBox is a TextField that takes input through a mask. Each mask character is one position in the text.
<UIToolbox.MaskedTextBox label="Phone" mask="(000) 000-0000" />
<UIToolbox.MaskedTextBox label="Plate" mask="LLL 0aa" prompt-char="·" />
| Mask character |
Slot |
0 / 9 |
A digit, required / optional. |
L / ? |
A letter, required / optional. |
A / a |
A letter or digit, required / optional. |
& / C |
Any character, required / optional. |
\ |
Makes the next character a literal, for example \0. |
| Any other character |
A literal. The user cannot change it. |
| Member |
Description |
Mask (mask) |
The mask. An empty mask makes a plain text field. A new mask keeps the typed characters that fit. |
PromptChar (prompt-char) |
The character in an empty slot (_). |
value |
The whole text, with literals and prompts: "(555) 123-____". |
UnmaskedText |
The typed characters only: "5551234". |
IsComplete |
True when every required slot has a character. |
- A typed character goes into the next slot at or after the cursor, over literals. A character that does not fit that slot is ignored. Typing the literal at the cursor steps over it.
- Backspace and Delete empty one slot, or the selected slots. Later characters do not move, so the layout stays fixed.
- Paste and a value set in code fill the slots in order with the characters that fit: "555-123-4567" and "5551234567" give the same text. A text that already has the mask's layout is read slot by slot.
- When the field loses focus with some but not all required slots filled, it gets
tb-masked-text-box--incomplete.
- Case conversion (
> and < in .NET masks) is not supported.
#Styling
| Class |
Element |
tb-masked-text-box |
The field. It is a TextField, so the unity-text-field classes also apply. |
tb-masked-text-box--incomplete |
On the field when it lost focus partly filled. The sheet gives the input a --tb-color-warning border. |
