text-input
input for text
<text-input>
An input for text values.
Motivation
The normal input
with type="text"
is fairly good to use, but it has some flaws, because it should if wanted e.g.:
- guarantee live-value to be valid
- to be styled easily
- auto resize on input
Example
<p>
hex-color: <text-input id="hex" value="{{value}}" input="{{input}}" default="#111" required pattern="^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" size="7" maxlength="7" minlength="4"></text-input>
</p>
<p>pattern: <b>^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$</b></p>
<p>input: <b>[[input]]</b></p>
<p>value: <b>[[value]]</b></p>
Styling
Have a look at input-picker-pattern#input-shared-style to see how to style the element.
Installation
npm i @fooloomanzoo/text-input
License
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @fooloomanzoo/input-picker-pattern#^3.0.10
- @polymer/polymer#^3
- Released
- 2018-11-16
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
text-input - Vaadin Add-on Directory
input for text[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/text-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/text-input)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/text-input)
_[API & Demo](https://fooloomanzoo.github.io/text-input)_
## \
An input for text values.
### Motivation
The normal `input` with `type="text"` is fairly good to use, but it has some flaws, because it should if wanted e.g.:
* guarantee **live**-value to be valid
* to be styled easily
* auto resize on input
### Example
```html
hex-color:
pattern: ^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
input: [[input]]
value: [[value]]
``` ### Styling Have a look at [input-picker-pattern#input-shared-style](https://github.com/fooloomanzoo/input-picker-pattern#input-shared-style) to see how to style the element. ### Installation ``` npm i @fooloomanzoo/text-input ``` ### License [MIT](https://github.com/fooloomanzoo/text-input/blob/master/LICENSE.txt)