GRAFFITITEXTFIELD - GRAFFITISUITE DOCS

# GraffitiTextField Class Inherits GraffitiWebUIControl ## About An enhanced TextField or TextArea replacement control with support for custom styling, masking, validation, and type definition. ## Compatibility ### Framework API Version | 1.0 | 2.0 | | :---: | :---: | | True | True | ### Web | 32-Bit | 64-Bit | | :---: | :---: | | True | True | ## Enumerations | Name | Value | Description | | --- | :---: | --- | | Alignments | Left Center Right | Supported text alignments. | | CaseModifiers | None Upper Lower | Supported text case modifiers. | | EnterKeyHints | Enter Done Go NextFocus PreviousFocus Search Send | Supported enter key hints for on-screen keyboards. | | FieldTypes | Text Color Date DateTime DateTimeLocal Email Number Password Telephone Time URL Week Search | Support field value entry types. | | Positions | Left Right | Supported position types. | | States | Unvalidated Valid Invalid | Supported validation states. | ## Event Definitions | Name | Parameters | Return Type | Description | | --- | :---: | :---: | --- | | EnterPressed | (None) | (None) | Raised when the user presses the Enter key on their keyboard while the field has focus. Simultaneously updates the value server-side. Prevents Default button action. | | GotFocus | (None) | (None) | (None) | | LabelPressed | (None) | (None) | Raised when the user clicks the label. | | LostFocus | (None) | (None) | (None) | | MaskComplete | (None) | (None) | Raised when the set mask is completed by the user. | | Open | (None) | (None) | (None) | | SelectionChanged | (None) | (None) | Raised when the text selection range has changed. | | Shown | (None) | (None) | (None) | | StateChanged | (None) | (None) | Raised when the user's text has changed the State of the field based on the supplied Pattern. | | ValueChanged | (None) | (None) | Raised when the user changes the value of the field. | ## Methods | Name | Parameters | Return Type | Description | | --- | :---: | :---: | --- | | AddValue | value as String | (None) | Adds a new value to the autocomplete array. | | AddValueAt | index as Integer value as String | (None) | Adds a new value to the autocomplete array at the specified index. | | IndexOfValue | value as String | Integer | Returns the index of the specified value within the autocomplete array. | | LastValueIndex | (None) | Integer | Returns the index of the last item within the autocomplete array. | | RemoveAllValues | (None) | (None) | Removes all values from the autocomplete array. | | RemoveValueAt | index as Integer | (None) | Removes the value at the specified index from the autocomplete array. | | SelectAll | (None) | (None) | Selects all content within the field. | | SetFocus | (None) | (None) | (None) | | ValueAt | index as Integer | String | Returns the autocomplete value at the specified index. | ## Properties | Name | Type | Default Value | Description | | --- | :---: | :---: | --- | | AllowLineFeed | Boolean | (None) | Controls whether users can enter line feeds by pressing the enter key. Does not affect the EnterPressed event. Applies only when Multiple = True. | | AllowLineWrapping | Boolean | (None) | Controls whether content lines are wrapped. Applied only when Multiple = True. | | AllowTabs | Boolean | (None) | Controls whether users are allowed to enter tab characters by pressing the Tab key or remove tabs by pressing Shift+Tab. Applies only when Multiline = True. When True, tab progression from this control to other controls will not function. | | AutocompleteHighlightTyped | Boolean | (None) | Highlights typed text within the autocomplete results dropdown. | | AutocompleteMaximumItems | Integer | (None) | Maximum number of items to display in the autocomplete results dropdown. | | AutocompleteSearchThreshold | Integer | (None) | Number of characters required to be input for autocomplete to process. | | CaseModifier | CaseModifiers | (None) | Controls the capitalization of value text. Also applies to Placeholder. | | Enabled | Boolean | (None) | (None) | | EnterKeyHint | EnterKeyHints | (None) | Text to display in the Enter button of mobile/virtual keyboards. | | FieldStyle | GraffitiStyle | (None) | Style applied to the field portion of the class. | | IconHeight | Integer | (None) | Height of IconObject when specified. | | IconObject | Picture | (None) | Custom icon displayed in the label portion. Signify location using <icon> in Label text. | | IconWidth | Integer | (None) | Width of IconObject when specified. | | Label | String | (None) | Caption of the label portion of the control. Supports FontAwesome icons, IE : <fas fa-search> | | LabelAlignment | Alignments | (None) | Alignment of text and icons in the label portion of the field. | | LabelPosition | Positions | (None) | The location of the label in relation to the field. | | LabelStyle | GraffitiStyle | (None) | Style applied to the label portion of the class. | | LabelVisible | Boolean | (None) | When False, only the text field portion of the component will be displayed. | | LabelWidth | Integer | (None) | Static width of label portion. -1 for auto. | | Mask | String | (None) | Mask applied to value. | | MaskPlaceholder | String | (None) | Placeholder character for value mask. | | MaskValid | Boolean | (None) | Value will be True when the user has completed the mask. | | MaxLength | Integer | (None) | Maximum number of characters that the field can contain. Set to -1 for the maximum HTML limit of 524288. | | MaxValue | Integer | (None) | Maximum integer value for numeric types. | | MinValue | Integer | (None) | Minimum integer value for numeric types. | | Multiline | Boolean | (None) | When True, the user may enter multiple lines of text within the component. Some other features or functionality may not be operational under these conditions due to browser limitations. | | Pattern | String | (None) | For using the browser's built-in RegEx validation ( https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern ). | | PatternInvalidMessage | String | (None) | Text to display when the entered text does not confirm to the supplied Pattern. Empty string uses browser default. | | PatternSetsState | Boolean | (None) | Determines whether the conformity of the input text to the supplied Pattern will change the State of the control to be visibly valid or invalid. | | Placeholder | String | (None) | Text to display when no Mask is provided and the field's content is empty. | | ReadOnly | Boolean | (None) | If True users cannot edit the contents of the field. | | Required | Boolean | (None) | Has no effect on display or function. Can be used to programmatically validate forms. | | SelectedText | String | (None) | Returns the currently selected text. | | SelectionLength | Integer | (None) | Length of the currently selected text. | | SelectionStart | Integer | (None) | Start position of the current selection. | | Spellcheck | Boolean | (None) | Controls whether spell checking is enabled on the field. | | State | States | (None) | The validation state of the field. | | Type | FieldTypes | (None) | The type of field, not all types are supported by all browsers. | | Value | String | (None) | The value of the field. Updates on focus loss to reduce communication with the server. | ## Notes ### Autocomplete and Search GraffitiTextField’s Autocomplete functionality should not be used with Type = Search due to a bug in Bootstrap and/or browser implementations. (See: https://github.com/twbs/bootstrap/issues/34411) ### Mask Definitions | Character | Accepted Inputs | | --- | --- | | | a | Alpha character (a-z, A-Z) | | 9 | Numeric character (0-9) | | * | Alphanumeric character (a-z, A-Z, 0-9) | | ? | Anything after the question mark is considered optional, and the MaskComplete event will fire with or without that section being filled. | ## Examples ### State This snippet changes the state of the field based on the length of the field's text: ```wp-block-code if me.Value.Length > 3 then me.State = GraffitiTextField.States.Valid elseif me.Value.Length <> "" then me.State = GraffitiTextField.States.Invalid else me.State = GraffitiTextField.States.Unvalidated end if ```