# j-Input

> j-Input är en multifunktionell ingångskomponent som stöder många funktioner och det är optimerat för daglig användning. j-Textbox och j-DropdownVerkar endast med jComponent +v17.

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

_j-Input_ är multifunktionell `input` komponenten som stöder många funktioner och den är optimerad för daglig användning. `j-Textbox` och `j-Dropdown`Verkar endast med jComponent `+v17`.


__Konfigurera__:

- `type {String}` alternativ, värden är:
	- tomt värde betyder standard `text`
	- `email`,
	- `multiline`
	- `checkbox`
	- `phone`
	- `password`
	- `zip`
	- `date` (behöver en komponent av `datepicker`)
	- __NEW__: `datetime` (behöver en komponent av `datepicker`)
	- `time` (behöver en komponent av `timepicker`)
	- `color` (behöver en komponent av `colorpicker`)
	- `icon` (behöver en komponent av `faicons`)
	- `emoji` (behöver en komponent av `emoji`)
	- `url`
	- `number`
	- `number2` (nollvärd)
	- `search`
	- `lower`
	- `upper`
	- `slug`
	- `id`
	- Nytt: `radiobutton`
	- Nytt: `tags`
	- Nytt: `tags-lower`
	- Nytt: `tags-upper`
	- Nytt: `tags-id`
	- Nytt: `tags-email`
	- Nytt: `tags-slug`
	- Nytt: `tags-phone`
	- Nytt: `tags-url`
- `required {Boolean}` valfritt, möjliggör "nödvändigt" (default: `false`)
- `icon {String}` valfritt, ikon för etikett t.ex. `home`, `cog`, etc.
- `licon {String}` valfritt, vänsterikon t.ex. `home`, `cog`, etc.
- `liconclick {String}` valfritt, en väg till metoden `function(component, input)`
- `ricon {String}` valfritt, högerikon t.ex. `home`, `cog`, etc.
- `riconclick {String}` valfritt, en väg till metoden `function(component, input)`
- `label {String}` är valfritt, en etikett (default är HTML-innehåll)
- `autofocus {Boolean}` är valfritt, fokuserar på inmatningen (default: `false`)
- `align {String}` Optionellt är, `left` (enligt standard för `2` / `right` eller `1` / `center`
- `after {String}` är valfritt, det betyder en char efter etikett (default: `:`)
- `autofill  {Boolean/String}` valfritt, möjliggör webbläsarens autofillfunktion (`string` kommer att användas som ett inmatningsnamn, standard: `false`)
- `placeholder {String}` alternativ, lägger till en `placeholder` text i inmatningen
- `maxlength {Number}` valfritt, ställer in en maximal längd av strängar (default: `200`)
- `minlength {Number}` valfritt, ställer in en minimilängd av lådor
- `minvalue {Number}` valfritt, ett minimivärde för typ `number`
- `maxvalue {Number}` valfritt, ett maximalt värde för typ `number`
- `increment {Number}` valfritt, anger ett värde för ökning (default: `1`)
- `validate {String}` är valideringsvillkor och kan innehålla en länk till `function(value)` eller `!!value.match(/[a-z]+/)`.
- `format {String}` Optionell, utgångsformatering etc. för `date` Typ av: `yyyy-MM-dd`För att `time` Typ av: `HH:mm`För att `number` Du kan definiera max. decimals (default: `auto`)
- `disabled {Boolean}` alternativ, inaktiverar denna komponent
- `error {String}` alternativ, lägger till en `string` text under komponenten
- `autocomplete {String}` är valfritt, måste innehålla en länk till en funktion, utlöses på `focus` händelse
- `spaces {Boolean}` valfritt, möjliggör utrymmen annars tar det bort dem (default: `true`)
- `innerlabel {Boolean}` valfritt, möjliggör inre etikett (default: `true`)
- `dirsource {String}` valfritt, väg till en datakälla eller __NEW__ till `function(search, next)` (vägen måste innehålla `/` eller _NEW_: `id|name,id|name`
- `dircustom {String/Boolean}` är valfritt, kan innehålla en väg till `function(val, next(new_val))` eller kan vara `Boolean`.Detta alternativ kan ge dig möjlighet att lägga till ett anpassat värde (värde inte definieras i datakällan)
- `dirrender {String}` är valfritt, en väg till `function(item, text)` (du måste returnera HTML för `j-Directory`), denna funktion kan påverka listan över objekt i `j-Directory`
- `dirminwidth {Number}` valfritt, minsta bredd för `j-Directory`, standard: `200`
- `dirmaxwidth {Number}` valfritt, högsta bredd för `j-Directory`
- `diroffsety {Number}` alternativ, `Y` offset (default: `0`)
- `diroffsetx {Number}` alternativ, `X` offset (default: `0`)
- `dirplaceholder {String}` valfritt, en platsinnehavare för `j-Directory`
- `dirempty {String}` alternativ, lägger till ett tomt fält för `j-Directory`
- `dirkey {String}` valfritt, ett nyckelnamn för läsning av `text` i `dirsource` (default: `name`)
- `dirvalue {String}` valfritt, ett nyckelnamn för läsning av `value` i `dirsource` (default: `id`)
- `direxclude {Boolean}` är valfritt, utesluter ett aktuellt värde från `j-Directory` (default: `true`)
- `dirsearch {Boolean|String}` alternativ, kan inaktivera sökningen i `j-Directory` (default: `true`) eller `{String}` (nyckelnamn) kan kartlägga ett värde för sökning
- `dirraw {Boolean}` valfritt, kan inaktivera flöde av objekt för `j-Directory` (default: `false`)
- `dirdetail {String}` är valfritt, en länk till funktionen `function(val, next(NEW_TEXT))` (målad för `dirsource`)
- `dirfilter {String}` valfritt, en inline-filter villkorlig metod, till exempel: `value.id !== 2` (målad för `dirsource`)
- __NEW__: `dirrawrender {Boolean}` valfritt, om `dirsource` inte innehåller värde kommer det att ge ett råvärde (default: `true`)
- `mask {String}` valfritt, kan innehålla en mask i form av `###/##` (`#` ersätts för en tåg)
- `maskregexp {String}` är valfritt, kan innehålla RegExp för varje chark i form `\d,\d,\d,null,\d,\d` (`,` är delimiter)
- `masktidy {Boolean}` är valfritt, komponenten returnerar endast råvaror utan fasta strängar (default: `false`)
- `autosource {String}` en väg till sökkällan `Array` (__NEW__) eller `function(search, render(arr))` för dynamisk sökning
- `autovalue {String}` är en fastighetssida för värdet i `autosource`, standard: `name`
- `autoexec {String}` en vägmetod `function(item, next(value_to_input))`
- `searchalign {Number}` kan anpassa ikonen på `type:search` att lämna (`2`eller rätt (`1`Förfalskad )
- `forcevalidation {Boolean}` möjliggör styrkavalidering för `phone` och `email` (default: `true`)
- `camouflage {Boolean|String}` maskerar värdet i inmatningen efter att `blur` händelse utlöses (default: `false`) eller det kan vara `String` som kommer att användas som en camouflage
- `monospace {Boolean}` aktiverar `monospaced` font (default: `false`)
- `multiple {Boolean}` aktiverar checkboxar om `dirsource` inte är tom
- `tabindex {Number}` lägger till en tabindex (default: `0`)
- `tabs {Boolean}` möjliggör flikar för multiline (default: `true`)
- `readonly {Boolean}` block textfältet (default: `false`)
- `transform {String}` en länk till `function(value, config)` för att omvandla inkommande värden
- `multiline {Boolean}` fungerar endast med `radiobutton` typ
- `separator {String|Boolean}` en separator för flera renderade värden
- `realtime {Boolean}` möjliggör realtidsbindning (default: `true`)
- `exec {String}` en länk till `function(value, element)` som kommer att utvärderas om inmatningen påverkas

__Intressanta är:__

- `type:date` behöver __`datepicker`__ komponent
- `type:time` behöver __`timepicker`__ komponent
- `dirsource:path.to.datasource` behöver __`directory`__ komponent
- Om `licon` eller `ricon` börjar med `!` så ger komponenten ett råvärde istället för `icon`.
- `ui-input-ok`-klassen binds när inmatningen valideras och fylls i
- `SET('path', 'camouflage', 'show');` visar värdet för 2000 ms

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

Använd den med `<ui-component name="input">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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