# j-Textbox

> j-Textbox: NOVÉ vnútorné označenie {Boolean} voliteľné, povolí vnútorné označenie (predvolené: true)

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 75a8128d00e716bb3130ffe2e20b4fdd0d1b1d9f2bf703139f508c0a0c78c248
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Konfigurácia__:

- `type {String}` (voliteľné) môže byť `email`, `phone`, `password`, `date`, `number`, `search`, `lower`, `upper` alebo prázdny (predvolené)
- `required {Boolean}` (voliteľné) povolí "povinné" (predvolené: `false`)
- `icon {String}` (voliteľná) ikona pre štítok napr. `home`, `cog`, atď.
- `icon2 {String}` (voliteľná) ikona v pravej krabici napr. `home`, `cog`, atď.
- `label {String}` (voliteľná) značka (predvolená je obsah HTML)
- `autofocus {Boolean}` (voliteľné) zaostrí vstup (predvolené: `false`)
- `align {String}` (voliteľné) `left` (predvolené), `right` alebo `center`
- `autofill {Boolean}` (voliteľne) umožňuje funkciu automatického prekladu prehliadača (predvolené: `false`)
- `placeholder {String}` (voliteľné) pridá do vstupu text `placeholder`
- `maxlength {Number}` (voliteľné) nastavuje maximálnu dĺžku znakov
- `minlength {Number}` (voliteľne) nastaví minimálnu dĺžku nádrží
- `validation {String}` (voliteľné) podmienka pre `evaluation` atď. `value.match(/[a-z]+/) !== null`
- `format {String}` (voliteľné) formátovanie výstupu, napr. pre dátumy (predvolené: `yyyy-MM-dd`)
- `increment {Boolean}` (voliteľné) umožňuje kontroly na zvýšenie počtu (predvolené: `false`)
- `keypress {Boolean}` (voliteľné) môže deaktivovať reálne časové záväzné hodnoty (predvolené: `true`)
- `delay {Number}` (voliteľné) môže zvýšiť/znížiť oneskorenie pre reálne zavedenie (predvolené: `300` ms)
- `disabled {Boolean}` (voliteľné) deaktivuje tento komponent
- `error {String}` (voliteľne) pridá text `string` pod vstupom
- `iconclick {String}` (voliteľné) musí obsahovať odkaz na funkciu
- `autocomplete {String}` (voliteľné) musí obsahovať odkaz na funkciu, je spustený na `focus` udalosti
- `spaces {Boolean}` (voliteľné) umožňuje priestory inak ich odstráni (predvolené: `true`)
- `readonly {Boolean}` voliteľné, predvolené `false`
- __NEW__ `innerlabel {Boolean}` voliteľné, umožňuje vnútornú značku (predvolené: `true`)

__Zaujímavé:__

- `type:date` používa zložku `calendar`

Použite ho so `<ui-component name="textbox">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```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>
```