Textarea Component: More Display Variants, Validation, Event, and Method Usage Examples
Category: ExamplesThe TEXTAREA component extends native textarea functionality with enhanced features including a toolbar, character limit indicators, and built-in input validation.
Icon Placeholder
Placeholders are typically plain text. When the iconholder attribute is added, the placeholder can use the system name of an icon, which will then display as an icon.
Customizing Borders
We can use CSS variables to customize the outer border of the input.
Using Tools
The text field toolbox can be set via the tools attribute. Simply adding the tools attribute or setting tools=true will enable the default clear button.
Character Limit
The limit attribute displays input text count statistics. Enabling this will automatically create a character limit indicator below.
The limit text defaults to English and can be modified via the lang.max attribute.
Single Line Display
Setting the single attribute can simulate the single-line display effect of an input element.
Using Feature Styles
By default, the header section has a background color and border.
Comprehensive Examples
The following demonstrates various combinations of child node styles.
Event Listeners
Since the component contains a non-hidden text field, it has all text field events (input, change, paste, select (highlight selection), etc.).
Since passing parameters with addEventListener is cumbersome, an additional set of listener events is provided.
Operation Methods
Built-in common methods include reset(), clear(), and set(data), along with input-specific blur and focus methods. Based on these methods, the component provides corresponding listener events.
Using Validation
Form field validation is an independent operation method.
Using Cache
When modifying element properties or values, if you need to cache data to restore previous properties and values when reloading the page, use the stor-name attribute. However, ensure this attribute value is unique in the browser cache.