Input Component: More Display Variants, Validation, Event, and Method Usage Examples
Category: ExamplesThe INPUT custom component is an enhanced wrapper of the native input element. While maintaining single-line text input functionality, it additionally provides toolbox features, character limit indicators, and input validation support.
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.
Each item in the tools value can use an action property, which is a function that accepts one data parameter, with this pointing to the input component.
Custom Content
The custom attribute allows free definition of content, supporting HTML-formatted text.
Using Buttons
In some simple forms, you might only need an input and a button for quick submission.
Related button attributes include action and blocked.
Using Password
When type=password is specified, the password attribute can be enabled.
Using Feature
Both label and unit nodes have background colors and borders. For a more minimalist style, set feature=plain.
To clearly indicate input content type, use feature=sign. This requires:
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.
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.
