# j-Input

> j-Input е мултифункционален вход компонент, който поддържа много функции и е оптимизиран за ежедневна употреба. j-Textbox и j-DropdownРаботи само с jComponent +v17.

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

_j-Input_ е многофункционален `input` компонент, който поддържа много функции и е оптимизиран за ежедневна употреба. `j-Textbox` и `j-Dropdown`Работи само с jComponent `+v17`.


__Конфигуриране__:

- `type {String}` опция, стойности:
	- Празна стойност означава дефолт `text`
	- `email`,
	- `multiline`
	- `checkbox`
	- `phone`
	- `password`
	- `zip`
	- `date` (необходим компонент на `datepicker`)
	- __NEW__: `datetime` (необходим компонент на `datepicker`)
	- `time` (необходим компонент на `timepicker`)
	- `color` (необходим компонент на `colorpicker`)
	- `icon` (необходим компонент на `faicons`)
	- `emoji` (необходим компонент на `emoji`)
	- `url`
	- `number`
	- `number2` (не е възможно да се
	- `search`
	- `lower`
	- `upper`
	- `slug`
	- `id`
	- Новата е: `radiobutton`
	- Новата е: `tags`
	- Новата е: `tags-lower`
	- Новата е: `tags-upper`
	- Новата е: `tags-id`
	- Новата е: `tags-email`
	- Новата е: `tags-slug`
	- Новата е: `tags-phone`
	- Новата е: `tags-url`
- `required {Boolean}` опционално, позволява "необходимо" (дефолт: `false`)
- `icon {String}` опция, икона за етикет например `home`, `cog`, и т.н.
- `licon {String}` опционален, лев икон например `home`, `cog`, и т.н.
- `liconclick {String}` опционален, пътят към метода `function(component, input)`
- `ricon {String}` опция, дясна икона, например `home`, `cog`, и т.н.
- `riconclick {String}` опционален, пътят към метода `function(component, input)`
- `label {String}` опция, етикет (предварително е HTML съдържание)
- `autofocus {Boolean}` е опционален, фокусира се върху входа (предварително: `false`)
- `align {String}` Оптималната `left` и по подразбиране, `2` / `right` или `1` / `center`
- `after {String}` е опционален, което означава захранване след етикета (дефолт: `:`)
- `autofill  {Boolean/String}` опционално, позволява функцията за автофил на браузъра (`string` ще се използва като име за вход, по подразбиране: `false`)
- `placeholder {String}` опционално, добавя текст на `placeholder` към входа
- `maxlength {Number}` опционално, определяне на максимална дължина на кабелите (предварително: `200`)
- `minlength {Number}` опция, определя минимална дължина на камионите
- `minvalue {Number}` опция, минимална стойност за тип `number`
- `maxvalue {Number}` опция, максимална стойност за тип `number`
- `increment {Number}` опционално, определя стойност за увеличаване (предварително: `1`)
- `validate {String}` опция, условие за валидиране на стойността, може да съдържа връзка към `function(value)` или `!!value.match(/[a-z]+/)`
- `format {String}` Опционално, изходни форматиране и т.н. `date` Типът е: `yyyy-MM-dd`За `time` Типът е: `HH:mm`За `number` Можете да определите максималните децимали (дефолт: `auto`)
- `disabled {Boolean}` опционално, деактивира този компонент
- `error {String}` опционално, добавя текст на `string` под компонента
- `autocomplete {String}` е опционален, трябва да съдържа връзка към функция, се излъчва на `focus` събитие
- `spaces {Boolean}` е опционален, позволява пространства в противен случай те се отстраняват (предварително: `true`)
- `innerlabel {Boolean}` опция, позволяваща вътрешна етикета (дефолт: `true`)
- `dirsource {String}` опционален, път към източник на данни или __NEW__ до `function(search, next)` (пътят трябва да съдържа `/` или __NOW__: `id|name,id|name`
- `dircustom {String/Boolean}` опция, може да съдържа път към `function(val, next(new_val))` или може да бъде `Boolean`. Тази опция може да позволи добавяне на персонализирана стойност (цена, която не е дефинирана в източника на данни)
- `dirrender {String}` опционален, пътят към `function(item, text)` (може да се върне HTML за `j-Directory`), тази функция може да повлияе на списъка с елементи в `j-Directory`
- `dirminwidth {Number}` опционално, минимална ширина за `j-Directory`, по подразбиране: `200`
- `dirmaxwidth {Number}` опция, максимална ширина за `j-Directory`
- `diroffsety {Number}` опция, `Y` отстъпка (дефолт: `0`)
- `diroffsetx {Number}` опция, `X` отстъпка (дефолт: `0`)
- `dirplaceholder {String}` опция, място за `j-Directory`
- `dirempty {String}` опционално, добавя празно поле за `j-Directory`
- `dirkey {String}` опционално, ключово име за четене на `text` в `dirsource` (предварително: `name`)
- `dirvalue {String}` опционално, ключово име за четене на `value` в `dirsource` (предварително: `id`)
- `direxclude {Boolean}` опционално, изключва текущата стойност от `j-Directory` (предварително: `true`)
- `dirsearch {Boolean|String}` опционално, може да деактивира търсенето в `j-Directory` (предварително: `true`) или `{String}` (ключово име) може да има стойност за търсене
- `dirraw {Boolean}` опционално, може да деактивира изтичането на елементи за `j-Directory` (предварително: `false`)
- `dirdetail {String}` опционално, връзка към функцията `function(val, next(NEW_TEXT))` (целенасочено за `dirsource`)
- `dirfilter {String}` опционален, инлайн филтър условен метод, например: `value.id !== 2` (целенасочен за `dirsource`)
- __NEW__: `dirrawrender {Boolean}` опция, ако `dirsource` не включва стойност тя ще направи сурова стойност (дефолт: `true`)
- `mask {String}` е опционален, може да съдържа маска във формата на `###/##` (`#` се заменя с захар)
- `maskregexp {String}` опционално, може да съдържа RegExp за всеки чар във формата на `\d,\d,\d,null,\d,\d` (`,` е делимитер)
- `masktidy {Boolean}` опционално, компонентът връща само сурови камери без фиксирани камери (дефолт: `false`)
- `autosource {String}` е пътят към източника на търсене `Array` (__NEW__) или `function(search, render(arr))` за динамично търсене
- `autovalue {String}` е свойствен път за стойността в `autosource`, по подразбиране: `name`
- `autoexec {String}` Методът на `function(item, next(value_to_input))`
- `searchalign {Number}` Може да се свърже икона `type:search` Да си тръгнем (`2`или правилно (`1`и дефолт)
- `forcevalidation {Boolean}` позволява валидиране на сила за `phone` и `email` (предварително: `true`)
- `camouflage {Boolean|String}` маскира стойността на входа след като се разгърне събитие `blur` (предварително: `false`) или може да бъде `String`, което ще се използва като камуфлаж
- `monospace {Boolean}` активира `monospaced` шрифт (дефолт: `false`)
- `multiple {Boolean}` дава възможност за проверка, ако `dirsource` не е празен
- `tabindex {Number}` добавя таб индекс (предварително: `0`)
- `tabs {Boolean}` позволява табчета за мултилин (предварително: `true`)
- `readonly {Boolean}` Блокиране на текстовото поле (дефолт: `false`)
- `transform {String}` е връзка към `function(value, config)` за преобразуване на въведените стойности
- `multiline {Boolean}` работи само с тип `radiobutton`
- `separator {String|Boolean}` - разделител за рендерирани стойности
- `realtime {Boolean}` позволява свързване в реално време (предварително: `true`)
- `exec {String}` е връзка към `function(value, element)` която ще бъде оценена, ако входът е засегнат

__Интересното е:__

- `type:date` изисква __`datepicker`__ компонент
- `type:time` изисква __`timepicker`__ компонент
- `dirsource:path.to.datasource` изисква __`directory`__ компонент
- Ако `licon` или `ricon` започва с `!`, тогава компонентът дава сурова стойност вместо `icon`.
- Класа `ui-input-ok` се свързва, когато входът е валидиран и попълнен
- `SET('path', 'camouflage', 'show');` показва стойността за 2000 ms

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

Използвайте го с `<ui-component name="input">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

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