# j-Input > j-Input ist eine multifunktionale Eingabekomponente, die viele Funktionen unterstützt und für den täglichen Gebrauch optimiert ist. Es ist eine großartige Alternative zu j-Textbox und j-Dropdown. Funktioniert nur mit jComponent +v17. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: de Content-SHA256: 25edfaf85684fc2894ff1fc72c395ced0c71012c3a9f4e67d2725067737d7c50 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded _j-Input_ ist multifunktionell `input` Komponente, die viele Funktionen unterstützt und für den täglichen Gebrauch optimiert ist. `j-Textbox` und `j-Dropdown`Arbeitet nur mit jComponent `+v17`. __Konfiguration__: - `type {String}` Option, Werte - Feuerwert bedeutet Standard-`text` - `email`, - `multiline` - `checkbox` - `phone` - `password` - `zip` - `date` (sie benötigt `datepicker` Komponente) - __NEW__: `datetime` (sie benötigt `datepicker` Komponente) - `time` (sie benötigt `timepicker` Komponente) - `color` (sie benötigt `colorpicker` Komponente) - `icon` (sie benötigt `faicons` Komponente) - `emoji` (sie benötigt `emoji` Komponente) - `url` - `number` - `number2` (Nullable) - `search` - `lower` - `upper` - `slug` - `id` - __NEU__: `radiobutton` - __NEU__: `tags` - __NEU__: `tags-lower` - __NEU__: `tags-upper` - __NEU__: `tags-id` - __NEU__: `tags-email` - __NEU__: `tags-slug` - __NEU__: `tags-phone` - __NEU__: `tags-url` - `required {Boolean}` optional, aktiviert „erforderlich“ (Standard: `false`) - `icon {String}` optionale, Ikon für die Etikette z.B. `home`, `cog`, etc. - `licon {String}` optionale, linken Ikon z. B. `home`, `cog`, etc. - `liconclick {String}` optionale, eine Art und Weise zu `function(component, input)` - `ricon {String}` optionale, rechte Ikon z. B. `home`, `cog`, etc. - `riconclick {String}` optionale, eine Art und Weise zu `function(component, input)` - `label {String}` optionale, eine Etikette (Default ist HTML-Inhalte) - `autofocus {Boolean}` optionale, konzentriert sich auf den Eingang (Default: `false`) - `align {String}` Optional ist, `left` (und im Standard) `2` / `right` oder `1` / `center` - `after {String}` optionale, das bedeutet eine Char nach der Etikette (Default: `:`) - `autofill {Boolean/String}` optionale, ermöglicht die Autofill-Funktion des Browsers (`string` wird als Eingabename verwendet werden, Standard: `false`) - `placeholder {String}` optional, fügt der Eingabe einen `placeholder`-Text hinzu - `maxlength {Number}` optional, legt eine maximale Zeichenlänge fest (Standard: `200`) - `minlength {Number}` optional, legt eine Mindestlänge von Zeichen fest - `minvalue {Number}` optional, ein Mindestwert für den Typ `number` - `maxvalue {Number}` optional, ein Maximalwert für den Typ `number` - `increment {Number}` optionale, stellt eine Wert für die Zunahme fest (Default: `1`) - `validate {String}` optional, eine Bedingung zur Validierung des Werts, kann einen Link zu `function(value)` oder `!!value.match(/[a-z]+/)` enthalten - `format {String}` Optional, Ausgangsformatering e.g. für `date` Typ zu finden: `yyyy-MM-dd`Für `time` Typ zu finden: `HH:mm`Für `number` Sie können max. decimals definieren (Default: `auto`) - `disabled {Boolean}` optional, deaktiviert diese Komponente - `error {String}` optionale, fügt einen `string` Text unter der Komponente hinzu - `autocomplete {String}` optional, muss einen Link zu einer Funktion enthalten, wird beim Ereignis `focus` ausgelöst - `spaces {Boolean}` optional, aktiviert Leerzeichen, andernfalls werden sie entfernt (Standard: `true`) - `innerlabel {Boolean}` optionale, ermöglicht die innere Etikette (Default: `true`) - `dirsource {String}` optionale, Pfad zu einer Datenquelle oder __NEW__ zu `function(search, next)` (Path muss `/` oder __NIEW__ enthalten: `id|name,id|name` - `dircustom {String/Boolean}` optionale, kann einen Weg zu `function(val, next(new_val))` enthalten oder kann `Boolean`. Diese Option ermöglicht die Einhaltung eines angepassten Wertes (Wert nicht definiert in der Datenquelle) - `dirrender {String}` optionale, eine Route zu `function(item, text)` (HTML für `j-Directory` zurückkehren muss), kann diese Funktion die Liste der Elemente in `j-Directory` beeinflussen - `dirminwidth {Number}` optionale, minimale Breite für `j-Directory`, Standard: `200` - `dirmaxwidth {Number}` optionale, eine maximale Breite für `j-Directory` - `diroffsety {Number}` optional, `Y` Offset (Standard: `0`) - `diroffsetx {Number}` optional, `X` Offset (Standard: `0`) - `dirplaceholder {String}` optionale, ein Platzinhaber für `j-Directory` - `dirempty {String}` optionale, fügt ein leeres Feld für `j-Directory` hinzu - `dirkey {String}` optionale, ein Schlüsselname für die Lesung von `text` in `dirsource` (Default: `name`) - `dirvalue {String}` optionale, ein Schlüsselname für die Lesung von `value` in `dirsource` (Default: `id`) - `direxclude {Boolean}` ist optionell und ausschließt einen aktuellen Wert von `j-Directory` (Default: `true`) - `dirsearch {Boolean|String}` optionale, kann die Suche in `j-Directory` (Default: `true`) oder `{String}` (Schlüsselname) ein Wert für die Suche deaktivieren - `dirraw {Boolean}` optionale, kann die Entladung von Elementen für `j-Directory` deaktivieren (Default: `false`) - `dirdetail {String}` optionale, eine Verbindung zur Funktion `function(val, next(NEW_TEXT))` (zielt auf `dirsource`) - `dirfilter {String}` optionale, eine inline-Filterbedingte Methode, zum Beispiel: `value.id !== 2` (zielt auf `dirsource`) - __NEW__: `dirrawrender {Boolean}` optionalerweise, wenn der `dirsource` keinen Wert enthält, wird er einen Rohwert darstellen (Default: `true`) - `mask {String}` optionale, kann eine Maske in der Form `###/##` enthalten (`#` wird für einen Charger ersetzt) - `maskregexp {String}` optionale, kann RegExp für jeden Char in der Form `\d,\d,\d,null,\d,\d` enthalten (`,` ist Delimiter) - `masktidy {Boolean}` optionale, die Komponente kehrt nur Rohdichte ohne Festdichte zurück (Default: `false`) - `autosource {String}` einen Weg zur Suchquelle `Array` (__NEW__) oder `function(search, render(arr))` für dynamische Suche - `autovalue {String}` ein Eigenschaftspfad für den Wert in `autosource`, Standard: `name` - `autoexec {String}` eine Pfadmethode `function(item, next(value_to_input))` - `searchalign {Number}` Sie können die Icon an `type:search` zu verlassen (`2`oder richtig (`1`und default) - `forcevalidation {Boolean}` ermöglicht die erzwungene Validierung für `phone` und `email` (Standard: `true`) - `camouflage {Boolean|String}` Masken Sie den Wert in der Eingabe nachdem er ausgelöst wird `blur` Die Veranstaltung (default ) `false`Oder es kann `String` die als Kamuflaß verwendet werden - `monospace {Boolean}` aktiviert die Schriftart `monospaced` (Standard: `false`) - `multiple {Boolean}` ermöglicht Checkboxes, wenn `dirsource` nicht leer ist - `tabindex {Number}` fügt einen Tabindex hinzu (Default: `0`) - `tabs {Boolean}` ermöglicht Tasten für Multilinen (Default: `true`) - `readonly {Boolean}` Block Textfeld Edition (Default: `false`) - `transform {String}` eine Verbindung zum `function(value, config)` für die Transformation eingegebener Werte - `multiline {Boolean}` funktioniert nur mit `radiobutton` - `separator {String|Boolean}` - ein separator für mehrere renderierte Werte - `realtime {Boolean}` ermöglicht die Echtzeitbindung (Default: `true`) - `exec {String}` ein Link zum `function(value, element)`, der ausgewertet wird, wenn der Eingang betroffen ist __Interessant:__ - `type:date` benötigt __`datepicker`__ Komponente - `type:time` benötigt __`timepicker`__ Komponente - `dirsource:path.to.datasource` benötigt __`directory`__ Komponente - Wenn `licon` oder `ricon` mit `!` beginnt, dann stellt die Komponente einen Rohwert anstelle von `icon` dar. - Die `ui-input-ok`-Klasse wird gebunden, wenn der Eingang validiert und gefüllt ist - `SET('path', 'camouflage', 'show');` zeigt den Wert für 2000 ms ```video https://www.youtube.com/watch?v=Ne3ezaP0w34 ``` Verwenden Sie es mit ``. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz. ```html example.html
Framework I agree with terms Notes Frameworks
City
Tags
Date
Search
Password
ZIP
Email
Phone
Gender
Gender
Your age
```