# j-Textbox

> j-Textbox: NEUES innerlabel {Boolean} optional, aktiviert inneres Label (Standard: true)

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 6a1bbe274eacf09ba2121e0e5e883675d7bb707f71dc73cc2af1357596d61371
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Konfiguration__:

- `type {String}` (optional) kann `email`, `phone`, `password`, `date`, `number`, `search`, `lower`, `upper` oder leer sein (Standard)
- `required {Boolean}` (optional) aktiviert „erforderlich“ (Standard: `false`)
- `icon {String}` (optional) Symbol für Beschriftung, z.B. `home`, `cog` usw.
- Symbol `icon2 {String}` (optional) im rechten Feld, z. B. `home`, `cog` usw.
- Label `label {String}` (optional) (Standard ist HTML-Inhalt)
- `autofocus {Boolean}` (optional) fokussiert die Eingabe (Standard: `false`)
- `align {String}` (optional) `left` (Standard), `right` oder `center`
- `autofill {Boolean}` (optional) aktiviert die Autofill-Funktion des Browsers (Standard: `false`)
- `placeholder {String}` (optional) fügt der Eingabe einen `placeholder`-Text hinzu
- `maxlength {Number}` (optional) legt eine maximale Länge von Zeichen fest
- `minlength {Number}` (optional) legt eine Mindestlänge von Zeichen fest
- `validation {String}` (optional) eine Bedingung für `evaluation`, z.B. `value.match(/[a-z]+/) !== null`
- `format {String}` (optional) Ausgabeformatierung z.B. für Datumsangaben (Standard: `yyyy-MM-dd`)
- `increment {Boolean}` (optional) ermöglicht Steuerelemente zum Erhöhen von Zahlen (Standard: `false`)
- `keypress {Boolean}` (optional) kann Echtzeit-Bindungswerte deaktivieren (Standard: `true`)
- `delay {Number}` (optional) kann die Verzögerung für die Echtzeitbindung erhöhen/verringern (Standard: `300` ms)
- `disabled {Boolean}` (optional) deaktiviert diese Komponente
- `error {String}` (optional) fügt einen `string`-Text unter der Eingabe hinzu
- `iconclick {String}` (optional) muss einen Link zu einer Funktion enthalten
- `autocomplete {String}` (optional) muss einen Link zu einer Funktion enthalten und wird beim Ereignis `focus` ausgelöst
- `spaces {Boolean}` (optional) aktiviert Leerzeichen, andernfalls werden sie entfernt (Standard: `true`)
- `readonly {Boolean}` optional, Standard `false`
- __NEU__ `innerlabel {Boolean}` optional, aktiviert Innenetikett (Standard: `true`)

__Interessant:__

- `type:date` verwendet die Komponente `calendar`

Verwenden Sie es mit `<ui-component name="textbox">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<div style="width:400px">
	<ui-component name="textbox" path="form.name" config="required:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
	<br />
	<ui-component name="textbox" path="form.email" config="required:true;type:email;autofill:email;icon:envelope;error:E-mail must be in format email@domain.com">E-mail</ui-component>
	<br />
	<ui-component name="textbox" path="form.password" config="type:password">Password</ui-component>
	<br />
	<ui-component name="textbox" path="form.note">Note</ui-component>
	<br />
	<ui-component name="textbox" path="form.phone" config="type:phone">Phone</ui-component>
	<br />
	<ui-component name="textbox" path="form.age" config="type:number;increment:true">Age</ui-component>
	<br />
	<ui-component name="textbox" path="form.search" config="type:search">Search</ui-component>
	<hr />
	<h2>Inner label</h2>
	<ui-component name="textbox" path="form.name" config="required:true;innerlabel:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
</div>

<script>
	var form = {};
	form.email = '@';
	form.age = 30;
</script>
```