# j-Input

> j-Input többfunkciós beviteli komponens, amely sok funkciót támogat, és optimalizált a mindennapi használatra. j-Textbox és j-DropdownCsak a munkával jComponent +v17.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 12d7277c4fbc7b1d727c2a56fe54a787219547b25217c89e3b9336fd3431491f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

_j-Input_ multifunkcionális `input` összetevő, amely sok funkciót támogat, és optimalizált a mindennapi használatra. `j-Textbox` és `j-Dropdown`Csak a munkával jComponent `+v17`.


__konfiguráció__:

- `type {String}` opcionális értékek:
	- Az üres értéke az alapértelmezett `text`-et jelenti
	- `email`,
	- `multiline`
	- `checkbox`
	- `phone`
	- `password`
	- `zip`
	- `date` (a `datepicker` összetevőre van szükség)
	- __NEW__: `datetime` (a `datepicker` komponensre van szükség)
	- `time` (a `timepicker` összetevőre van szükség)
	- `color` (a `colorpicker` összetevőre van szükség)
	- `icon` (a `faicons` összetevőre van szükség)
	- `emoji` (a `emoji` összetevőre van szükség)
	- `url`
	- `number`
	- `number2` (nem érvényes)
	- `search`
	- `lower`
	- `upper`
	- `slug`
	- `id`
	- Hírek > `radiobutton`
	- Hírek > `tags`
	- Hírek > `tags-lower`
	- Hírek > `tags-upper`
	- Hírek > `tags-id`
	- Hírek > `tags-email`
	- Hírek > `tags-slug`
	- Hírek > `tags-phone`
	- Hírek > `tags-url`
- `required {Boolean}` opcionális, lehetővé teszi a „követelt” (default: `false`)
- `icon {String}` opcionális, a címkék ikonja például `home`, `cog`, stb.
- `licon {String}` opcionális, bal ikon, például `home`, `cog`, stb.
- `liconclick {String}` opcionális, a `function(component, input)` módszerhez vezető út
- `ricon {String}` opcionális, jobb ikon, például `home`, `cog`, stb.
- `riconclick {String}` opcionális, a `function(component, input)` módszerhez vezető út
- `label {String}` opcionális, címke (az alapértelmezett HTML tartalom)
- `autofocus {Boolean}` opcionális, összpontosítja a bevitelt (default: `false`)
- `align {String}` az opcionális, `left` (Egy alaptörvény szerint `2` / `right` vagy `1` / `center`
- `after {String}` opcionális, ez azt jelenti, hogy egy char a címke után (default: `:`)
- `autofill  {Boolean/String}` opcionális, lehetővé teszi a böngésző autofill funkcióját (`string` fog használni a beviteli névként, alapértelmezett: `false`)
- A `placeholder {String}` opcionális, a `placeholder` szöveget adja hozzá a bejegyzéshez
- `maxlength {Number}` opcionális, maximális tartományt állapít meg (default: `200`)
- `minlength {Number}` opcionális, minimális hosszúságot állít be
- `minvalue {Number}` opcionális, a `number` típus minimális értéke
- `maxvalue {Number}` opcionális, a `number` típus maximális értéke
- A `increment {Number}` opcionális, a fokozás értéke (default: `1`)
- `validate {String}` opcionális, az érték validálásának feltétele, tartalmazhat egy linket a `function(value)` vagy `!!value.match(/[a-z]+/)`
- `format {String}` Az opcionális, kimeneti formázás stb. `date` A típus: `yyyy-MM-dd`Azért `time` A típus: `HH:mm`Azért `number` Maximális decimálok (default) meghatározása: `auto`)
- `disabled {Boolean}` opcionális, kikapcsolja ezt az összetevőt
- `error {String}` opcionális, hozzáadja a `string` szöveget az összetevő alatt
- `autocomplete {String}` opcionális, egy funkcióhoz való linket kell tartalmaznia, a `focus` eseményen indítható
- `spaces {Boolean}` opcionális, lehetővé teszi a helyek máskülönben eltávolítja őket (default: `true`)
- `innerlabel {Boolean}` opcionális, lehetővé teszi a belső címke (default: `true`)
- `dirsource {String}` opcionális, az adatforráshoz vezető út vagy __NEW__ a `function(search, next)` felé (az útnak tartalmaznia kell a `/` vagy a _NEW_: `id|name,id|name`
- `dircustom {String/Boolean}` opcionális, tartalmazhat egy utat a `function(val, next(new_val))` vagy lehet `Boolean`. Ez az opció lehetővé teszi a hozzáadott érték (érték nem meghatározott adatforrás)
- `dirrender {String}` opcionális, egy út a `function(item, text)` (a `j-Directory` HTML-t vissza kell téríteni), ez a funkció befolyásolhatja az elemek listáját a `j-Directory`
- `dirminwidth {Number}` opcionális, minimális szélesség a `j-Directory`, alapértelmezett: `200`
- `dirmaxwidth {Number}` opcionális, maximális szélesség a `j-Directory`
- `diroffsety {Number}` opcionális, `Y` offset (default: `0`)
- `diroffsetx {Number}` opcionális, `X` offset (default: `0`)
- `dirplaceholder {String}` opcionális, egy helytartó a `j-Directory`
- `dirempty {String}` opcionális, üres mezőt ad a `j-Directory` számára
- `dirkey {String}` opcionális, a `text` olvasásához szükséges kulcsszavak `dirsource`-ben (előzetes: `name`)
- `dirvalue {String}` opcionális, a `value` olvasásához szükséges kulcsszavak `dirsource`-ben (előzetes: `id`)
- `direxclude {Boolean}` opcionális, kizárja a jelenlegi értéket a `j-Directory` (default: `true`)
- `dirsearch {Boolean|String}` opcionális, lehet letiltani a keresést a `j-Directory` (default: `true`) vagy a `{String}` (kulcsnev) térképet értéket keresés
- `dirraw {Boolean}` opcionális, nem engedélyezheti a `j-Directory` elemek elkerülését (default: `false`)
- `dirdetail {String}` opcionális, a `function(val, next(NEW_TEXT))` funkcióhoz való hivatkozás (a `dirsource`-re irányuló)
- `dirfilter {String}` opcionális, inline szűrő feltételes módszer, például: `value.id !== 2` (a `dirsource`-re irányuló)
- __NEW__: `dirrawrender {Boolean}` opcionális, ha a `dirsource` nem tartalmaz értéket, akkor nyers értéket jelent (default: `true`)
- `mask {String}` opcionális, tartalmazhat egy maszk formájában `###/##` (`#` helyettesíthető a char)
- `maskregexp {String}` opcionális, tartalmazhat RegExp minden char a `\d,\d,\d,null,\d,\d` formában (`,` a delimiter)
- `masktidy {Boolean}` opcionális, az összetevő csak nyers csöveket ad vissza rögzített csövek nélkül (előzetes: `false`)
- `autosource {String}` egy út a keresési forráshoz `Array` (__NEW__) vagy `function(search, render(arr))` a dinamikus kereséshez
- `autovalue {String}` a tulajdonság útja az értékre `autosource`, alapértelmezett: `name`
- `autoexec {String}` egy út módszer `function(item, next(value_to_input))`
- `searchalign {Number}` Az ikonok illeszkedhetnek `type:search` Elhagyni (`2`vagy a helyes (`1`A default)
- A `forcevalidation {Boolean}` lehetővé teszi a `phone` és a `email` teljesítmény validálását (default: `true`)
- A `camouflage {Boolean|String}` elrejti az értéket a beviteli után `blur` esemény (például: `false`) vagy lehet `String` amely használható, mint egy kamuflázió
- A `monospace {Boolean}` a `monospaced` betűtípusot engedélyezi (például: `false`)
- A `multiple {Boolean}` lehetővé teszi az ellenőrző dobozokat, ha a `dirsource` nem üres
- A `tabindex {Number}` beállítja a tabindexet (például: `0`)
- A `tabs {Boolean}` lehetővé teszi a multilinek címkéit (default: `true`)
- `readonly {Boolean}` blokk szöveg mező kiadás (default: `false`)
- `transform {String}` a beadott értékek átalakítására szolgáló `function(value, config)` link
- A `multiline {Boolean}` csak a `radiobutton` típusral működik
- `separator {String|Boolean}` - több renderezett értékek szétválasztója
- A `realtime {Boolean}` valós idejű kötődését teszi lehetővé (default: `true`)
- `exec {String}` egy link a `function(value, element)` amely értékelni fogja, ha a bevitelt befolyásolja

__Érdekes az:__

- `type:date` szükséges __`datepicker`__ komponens
- `type:time` szükséges __`timepicker`__ komponens
- `dirsource:path.to.datasource` szükséges __`directory`__ komponens
- Ha az `licon` vagy `ricon` Kezdődik a `!` A készítmény a nyers érték helyett `icon`
- A `ui-input-ok` osztály kötődik, amikor a bevitelt érvényesítik és kitöltötték
- A `SET('path', 'camouflage', 'show');` értékét mutatja a 2000 ms

```video
https://www.youtube.com/watch?v=Ne3ezaP0w34
```

Használja a `<ui-component name="input">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

```html example.html
<ui-component name="LAZY directory" config="placeholder:Search..."></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY icons"></ui-component>

<div style="width:400px">
	<ui-component name="input" path="form.framework" config="placeholder:Choose a framework;dirsource:frameworks" class="m">Framework</ui-component>
	<ui-component name="input" path="form.terms" config="type:checkbox" class="m">I agree with terms</ui-component>
	<ui-component name="input" path="form.notes" config="type:multiline;innerlabel:1;placeholder:Enter notes" class="m">Notes</ui-component>
	<ui-component name="input" path="form.frameworks" config="placeholder:Select frameworks;multiple:true;dirsource:frameworks">Frameworks</ui-component>
	<br />
	<ui-component name="input" path="form.city" config="required:1;placeholder:Where do you live?;dirsource:cities;dircustom:true">City</ui-component>
	<br />
	<ui-component name="input" path="cities" config="type:tags;placeholder:Type a tag and press enter">Tags</ui-component>
	<br />
	<ui-component name="input" path="form.date" config="placeholder:Enter date;type:date;required:true;innerlabel:true">Date</ui-component>
	<br />
	<ui-component name="input" path="form.search" config="placeholder:Search...;type:search;innerlabel:true">Search</ui-component>
	<br />
	<ui-component name="input" path="form.password" config="placeholder:Type a password...;type:password">Password</ui-component>
	<br />
	<ui-component name="input" path="form.zip" config="mask:###-##;maskregexp:\d,\d,\d,null,\d,\d">ZIP</ui-component>
	<br />
	<ui-component name="input" path="form.email" config="placeholder:example@email.com;type:email">Email</ui-component>
	<br />
	<ui-component name="input" path="form.phone" config="placeholder:+421;type:phone">Phone</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown">Gender</ui-component>
	<br />
	<ui-component name="input" path="form.radio" config="type:radiobutton;dirsource:Male,Female,Unknown;multiline:1">Gender</ui-component>
	<br />
	<div style="width:150px">
		<ui-component name="input" path="form.age" config="type:number;innerlabel:false">Your age</ui-component>
	</div>
</div>

<script>
	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var cities = ['Slovakia', 'Poland', 'Hungary', 'Germany'];
	var form = {};
	form.age = 30;
</script>
```
