# j-Input > j-Input is een multifunctionele inputcomponent die veel functies ondersteunt en is geoptimaliseerd voor dagelijks gebruik. j-Textbox en j-DropdownWerkt alleen met jComponent +v17. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: nl Content-SHA256: 87ee972db7a6ecb85b0cbf8c979b5aaed5a9fb77166637271daf9c07fb625754 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded _j-Input_ is multifunctioneel `input` component die veel functies ondersteunt en is geoptimaliseerd voor dagelijks gebruik. `j-Textbox` en `j-Dropdown`Werkt alleen met jComponent `+v17`. __Configuratie__: - `type {String}` optie, waarden: - Vrije waarde betekent standaard `text` - `email`, - `multiline` - `checkbox` - `phone` - `password` - `zip` - `date` (het vereist de `datepicker` component) - __NEW__: `datetime` (need een component van `datepicker`) - `time` (het vereist de `timepicker` component) - `color` (het vereist de `colorpicker` component) - `icon` (het vereist de `faicons` component) - `emoji` (het vereist de `emoji` component) - `url` - `number` - `number2` (niet mogelijk) - `search` - `lower` - `upper` - `slug` - `id` - Hoofdstukken: `radiobutton` - Hoofdstukken: `tags` - Hoofdstukken: `tags-lower` - Hoofdstukken: `tags-upper` - Hoofdstukken: `tags-id` - Hoofdstukken: `tags-email` - Hoofdstukken: `tags-slug` - Hoofdstukken: `tags-phone` - Hoofdstukken: `tags-url` - `required {Boolean}` optioneel, mogelijk "verplicht" (default: `false`) - `icon {String}` optioneel, icon voor etiket bijvoorbeeld `home`, `cog`, enz. - `licon {String}` optioneel, linkse icon bijvoorbeeld `home`, `cog`, enz. - `liconclick {String}` optioneel, een weg naar de methode `function(component, input)` - `ricon {String}` optioneel, rechter icon bijvoorbeeld `home`, `cog`, enz. - `riconclick {String}` optioneel, een weg naar de methode `function(component, input)` - `label {String}` optioneel, een etiket (de standaard is HTML-inhoud) - `autofocus {Boolean}` optioneel, focust op de ingang (default: `false`) - `align {String}` Optieel is, `left` De standaard, `2` / `right` Of `1` / `center` - `after {String}` optioneel, het betekent een char na etiket (default: `:`) - `autofill {Boolean/String}` optioneel, de autofillfunctie van de browser (`string` zal worden gebruikt als een invoernaam, standaard: `false`) - `placeholder {String}` optioneel, voegt een `placeholder` tekst toe aan de invoer - `maxlength {Number}` optioneel, bepaalt een maximale lengte van de banden (default: `200`) - `minlength {Number}` optioneel, bepaalt een minimale lengte van banden - `minvalue {Number}` optioneel, een minimale waarde voor de `number` type - `maxvalue {Number}` optioneel, een maximale waarde voor de `number` type - `increment {Number}` optioneel, bepaalt een waarde voor verhoging (default: `1`) - `validate {String}` optioneel, een voorwaarde voor validatie van waarde, kan een link bevatten naar `function(value)` of `!!value.match(/[a-z]+/)` - `format {String}` optie, output formatting enz. voor `date` Type van: `yyyy-MM-dd`Voor `time` Type van: `HH:mm`Voor `number` U kunt max. decimals definiëren (default: `auto`) - `disabled {Boolean}` optioneel, deze component wordt uitgeschakeld - `error {String}` optioneel, voegt een `string` tekst onder de component toe - `autocomplete {String}` optioneel, moet een link naar een functie bevatten, wordt uitgevoerd op het evenement `focus` - `spaces {Boolean}` optioneel, maakt ruimte anders het verwijdert ze (default: `true`) - `innerlabel {Boolean}` optioneel, mogelijk interne etikettering (default: `true`) - `dirsource {String}` optioneel, de route naar een gegevensbron of __NEW__ naar `function(search, next)` (de route moet `/` of __NIEW__ bevatten: `id|name,id|name` - `dircustom {String/Boolean}` is optioneel, kan een route bevatten naar `function(val, next(new_val))` of kan `Boolean`. Deze optie kan het toevoegen van een aangepaste waarde (waarde niet gedefinieerd in de gegevensbron) - `dirrender {String}` optioneel, een route naar `function(item, text)` (must HTML retourneren voor `j-Directory`), deze functie kan de lijst van items in `j-Directory` beïnvloeden - `dirminwidth {Number}` optioneel, een minimale breedte voor `j-Directory`, standaard: `200` - `dirmaxwidth {Number}` optioneel, een maximale breedte voor `j-Directory` - `diroffsety {Number}` optioneel, `Y` offset (default: `0`) - `diroffsetx {Number}` optioneel, `X` offset (default: `0`) - `dirplaceholder {String}` optioneel, een plaatshouder voor `j-Directory` - `dirempty {String}` optioneel, voegt een leeg veld toe voor `j-Directory` - `dirkey {String}` optioneel, een sleutelnaam voor het lezen van `text` in `dirsource` (default: `name`) - `dirvalue {String}` optioneel, een sleutelnaam voor het lezen van `value` in `dirsource` (default: `id`) - `direxclude {Boolean}` optioneel, uitsluit een huidige waarde van `j-Directory` (default: `true`) - `dirsearch {Boolean|String}` optioneel, kan de zoekopdracht in `j-Directory` (default: `true`) of `{String}` (key name) kunnen een waarde voor het zoeken mappen - `dirraw {Boolean}` optioneel, kan het ontsnappen van items voor `j-Directory` worden uitgeschakeld (default: `false`) - `dirdetail {String}` optioneel, een link naar de functie `function(val, next(NEW_TEXT))` (doelstelling voor `dirsource`) - `dirfilter {String}` optioneel, een inline filterconditionele methode, bijvoorbeeld: `value.id !== 2` (gericht op `dirsource`) - __NEW__: `dirrawrender {Boolean}` optioneel, als de `dirsource` geen waarde bevat, zal het een grondwaarde opleveren (default: `true`) - `mask {String}` optioneel, kan een masker in de vorm van `###/##` bevatten (`#` wordt vervangen door een char) - `maskregexp {String}` optioneel, kan RegExp bevatten voor elke char in het formulier `\d,\d,\d,null,\d,\d` (`,` is delimiter) - `masktidy {Boolean}` optioneel, de component retourt alleen grondvluchten zonder vaste vluchten (default: `false`) - `autosource {String}` een route naar de zoekbron `Array` (__NEW__) of `function(search, render(arr))` voor dynamische zoekopdrachten - `autovalue {String}` een eigendomsweg voor de waarde in `autosource`, standaard: `name` - `autoexec {String}` een pad methode `function(item, next(value_to_input))` - `searchalign {Number}` kan ik icon op `type:search` Verlaten (`2`Of juist (`1`De default) - `forcevalidation {Boolean}` mogelijk voor kracht validatie voor `phone` en `email` (default: `true`) - `camouflage {Boolean|String}` verbergt de waarde in de ingang na het worden uitgevoerd `blur` gebeurtenis (default: `false`) of het kan zijn `String` dat zal worden gebruikt als een camouflage - `monospace {Boolean}` maakt `monospaced` lettertype mogelijk (default: `false`) - `multiple {Boolean}` maakt checkboxes mogelijk als `dirsource` niet leeg is - `tabindex {Number}` voegt een tabindex toe (default: `0`) - `tabs {Boolean}` toelaat de tabs voor multiline (default: `true`) - `readonly {Boolean}` blok tekstveld editie (default: `false`) - `transform {String}` een link naar de `function(value, config)` voor het transformeren van ingebouwde waarden - `multiline {Boolean}` werkt alleen met `radiobutton` - `separator {String|Boolean}`: een separator voor meerdere renderde waarden - `realtime {Boolean}` zorgt voor realtime binding (default: `true`) - `exec {String}` een link naar de `function(value, element)` die zal worden beoordeeld als de ingang wordt beïnvloed __Interessant is:__ - `type:date` nodig __`datepicker`__ component - `type:time` nodig __`timepicker`__ component - `dirsource:path.to.datasource` nodig __`directory`__ component - Als `licon` of `ricon` begint met `!`, dan is de component een grondwaarde in plaats van `icon`. - De `ui-input-ok`-klasse wordt gebonden wanneer de input is gevalideerd en gevuld. - `SET('path', 'camouflage', 'show');` toont de waarde voor 2000 ms ```video https://www.youtube.com/watch?v=Ne3ezaP0w34 ``` Gebruik het met ``Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie. ```html example.html
Framework I agree with terms Notes Frameworks
City
Tags
Date
Search
Password
ZIP
Email
Phone
Gender
Gender
Your age
```