Contact us Create app

Directory

← Back

text-input

input for text

Author

Rating

Links

Popularity

<100

Published on NPM Published on webcomponents.org

API & Demo

<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

MIT

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

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 text-input - Vaadin Add-on Directory
[![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)
View on NPM
View on GitHub

text-input version 1.0.0
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.1
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.10
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.2
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.4
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.5
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.6
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.7
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.8
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.9
### Dependencies * polymer#Polymer/polymer

text-input version 1.0.12
### Dependencies * polymer#Polymer/polymer#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#1.0.15

text-input version 2.0.0
### Dependencies * polymer#Polymer/polymer#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

text-input version 2.0.1
### Dependencies * polymer#Polymer/polymer#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

text-input version 2.0.2
### Dependencies * polymer#Polymer/polymer#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

text-input version 2.0.3
### Dependencies

text-input version 2.0.4
### Dependencies

text-input version 2.0.5
### Dependencies

text-input version 2.0.6
### Dependencies

text-input version 2.0.7
### Dependencies

text-input version 2.0.8
### Dependencies

text-input version 2.0.9
### Dependencies * @polymer/polymer#^2.6.1 * @fooloomanzoo/input-picker-pattern#^2

text-input version 3.0.0
### Dependencies * @polymer/polymer#^3 * @fooloomanzoo/input-picker-pattern#^3

text-input version 3.0.1
### Dependencies * @fooloomanzoo/input-picker-pattern#^3 * @polymer/polymer#^3

text-input version 3.0.2
### Dependencies * @fooloomanzoo/input-picker-pattern#^3 * @polymer/polymer#^3

text-input version 3.0.3
### Dependencies * @fooloomanzoo/input-picker-pattern#^3 * @polymer/polymer#^3

text-input version 3.0.4
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.4 * @polymer/polymer#^3

text-input version 3.0.5
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.7 * @polymer/polymer#^3

text-input version 3.0.6
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @polymer/polymer#^3

text-input version 3.0.7
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @polymer/polymer#^3

text-input version 3.0.8
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.10 * @polymer/polymer#^3

Online