Textarea | Textarea element extended with new functions
scoped
Textarea extends the capabilities of the standard HTML textarea element. It adds styles to achieve a visually consistent user interface and offers features such as auto-height - adjusting the height of an element to the inserted text, or also a counter for inserted characters.
Adding the standard attribute will display a textarea in the style of the standard HTML textarea element.
Adding the counter attribute will display a counter below the textarea showing the number of characters inserted and the maximum number of characters allowed. It is to be used in combination with the max-length property. Otherwise, the maximum number allowed will be set to 1000.
The resize property specifies the behavior of element resizing. If set to none, the field size remains fixed.
If the resize property is set to auto, the size of the element is automatically adjusted to the inserted content.
When the disabled attribute is inserted into the textarea element, it will not be possible to write.
| Description | If true, adds a counter below the element showing the number of characters inserted and also the maximum number allowed. |
| Attribute | counter |
| Type | boolean |
| Default | false |
| Description | If true, the textarea will not be writable. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | Defines the text description for the textarea element. |
| Attribute | label |
| Type | string ｜ undefined |
| Default | undefined |
| Description | Sets the maximum number of characters allowed. Used in conjunction with the counter attribute. |
| Attribute | maxlength |
| Type | number ｜ undefined |
| Default | 1000 |
| Description | Sets the name attribute of the inner textarea of the element. This is important, for example, when used in forms. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | Defines the behavior of element resizing. If it is set to "auto", the element size is automatically adjusted to the content. |
| Attribute | resize |
| Type | "car" |
| Default | undefined |
| Description | Defines the number of visible lines of text in the element. |
| Attribute | rows |
| Type | number ｜ undefined |
| Default | undefined |
| Description | If true, spell checking will be activated in textarea. |
| Attribute | spellcheck |
| Type | boolean |
| Default | false |
| Description | Setting it to "standard" will display a textarea in the style of the standard HTML textarea element. |
| Attribute | Option |
| Type | string |
| Default | '' |
| Name | Description |
|---|
blur | Fired when an element loses focus. |
wj:textarea:change | It is invoked after a change in textarea. |
focus | Called when the element gets focus. |
wj:textarea:input | The ionInput event is fired each time the user modifies the textarea's value. Unlike the ionChange event, the ionInput event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types.
When clearOnEdit is enabled, the ionInput event will be fired when the user clears the textarea by performing a keydown event. |
No public methods available for this component.
| Name | Description |
|---|
input | Refers to the textarea element inside the element. |
| Name | Description |
|---|
--wj-textarea-background-color | Sets the background color of the element. |
--wj-textarea-border-color | Sets the color of the edges of the element. |
--wj-textarea-border-color-focus | Sets the color of the edges when you take a photo. |
--wj-textarea-border-radius | Adjusts the rounding of the element edges. |
--wj-textarea-border-style | Sets the element's border style. |
--wj-textarea-border-width | Sets the width of the element edges. |
--wj-textarea-color | Sets the text color of the element. |
--wj-textarea-color-invalid | Sets the text color on error. |
--wj-textarea-font-family | Sets the font of the element. |
--wj-textarea-line-height | Sets the height of the element row. |
--wj-textarea-margin-bottom | Sets the lower outer offset of the element. |
--wj-textarea-padding | Sets the internal offset of the element. |
No slots available for this component.