# j-Input > j-Input est un composant d'entrée multifonctionnel qui prend en charge de nombreuses fonctionnalités et est optimisé pour une utilisation quotidienne. C'est une excellente alternative à j-Textbox et j-Dropdown. Fonctionne uniquement avec jComponent +v17. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: fr Content-SHA256: c044d58bc45588ae09b3edf3629bde5dae0ddb48b739cf88158be1629d14c7c2 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded _j-Input_ est multifonctionnel `input` composant qui soutient beaucoup de fonctionnalités et est optimisé pour l'utilisation quotidienne. `j-Textbox` et `j-Dropdown`Il travaille uniquement avec jComponent `+v17`. __Configuration__ : - `type {String}` optionnel, valeurs : - La valeur vide signifie défaut `text` - `email`, - `multiline` - `checkbox` - `phone` - `password` - `zip` - `date` (il faut un composant `datepicker`) - __NEW__ : `datetime` (ne nécessite pas de composant `datepicker`) - `time` (il faut un composant `timepicker`) - `color` (il faut un composant `colorpicker`) - `icon` (il faut un composant `faicons`) - `emoji` (il faut un composant `emoji`) - `url` - `number` - `number2` (non disponible) - `search` - `lower` - `upper` - `slug` - `id` - Étiquette : `radiobutton` - Étiquette : `tags` - Étiquette : `tags-lower` - Étiquette : `tags-upper` - Étiquette : `tags-id` - Étiquette : `tags-email` - Étiquette : `tags-slug` - Étiquette : `tags-phone` - Étiquette : `tags-url` - `required {Boolean}` en option, active "obligatoire" (par défaut : `false`) - `icon {String}` en option, icône pour étiquette par ex. `home`, `cog`, etc. - `licon {String}` en option, icône de gauche par ex. `home`, `cog`, etc. - `liconclick {String}` facultatif, un chemin vers la méthode `function(component, input)` - `ricon {String}` en option, icône de droite par ex. `home`, `cog`, etc. - `riconclick {String}` facultatif, un chemin vers la méthode `function(component, input)` - `label {String}` facultatif, une étiquette (la valeur par défaut est le contenu HTML) - `autofocus {Boolean}` optionnel, focalisant l'entrée (defaut: `false`) - `align {String}` Optionnel `left` par défaut, `2` / `right` ou `1` / `center` - `after {String}` facultatif, cela signifie un caractère après l'étiquette (par défaut : `:`) - `autofill {Boolean/String}` optionnel, permet la fonctionnalité d'autofill du navigateur (`string` sera utilisé comme nom d'entrée, par défaut: `false`) - `placeholder {String}` facultatif, ajoute un texte `placeholder` dans l'entrée - `maxlength {Number}` optionnel, fixant une longueur maximale des chars (defaut: `200`) - `minlength {Number}` optionnel, fixant une longueur minimale des chars - `minvalue {Number}` optionnel, une valeur minimale pour le type `number` - `maxvalue {Number}` optionnel, une valeur maximale pour le type `number` - `increment {Number}` optionnel, définit une valeur pour l'augmentation (defaut: `1`) - `validate {String}` facultatif, condition de validation de valeur, peut contenir un lien vers `function(value)` ou `!!value.match(/[a-z]+/)` - `format {String}` optionnel, formatage de sortie etc. pour `date` Type : `yyyy-MM-dd`Pour `time` Type : `HH:mm`Pour `number` Vous pouvez définir les décimales (defaut : `auto`) - `disabled {Boolean}` facultatif, désactive ce composant - `error {String}` facultatif, ajoute un texte `string` sous le composant - `autocomplete {String}` optionnel, doit contenir un lien à une fonction, est déclenché sur l'événement `focus` - `spaces {Boolean}` facultatif, active les espaces sinon il les supprime (par défaut : `true`) - `innerlabel {Boolean}` en option, active l'étiquette intérieure (par défaut : `true`) - `dirsource {String}` facultatif, route vers une source de données ou __NEW__ à `function(search, next)` (pour contenir `/` ou __NOW__: `id|name,id|name` - `dircustom {String/Boolean}` facultatif, peut contenir un chemin vers `function(val, next(new_val))` ou peut être `Boolean`. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données) - `dirrender {String}` facultatif, un chemin vers `function(item, text)` (doit renvoyer du HTML pour `j-Directory`), cette fonction peut affecter la liste des éléments dans `j-Directory` - `dirminwidth {Number}` en option, une largeur minimale pour `j-Directory`, par défaut : `200` - `dirmaxwidth {Number}` en option, une largeur maximale pour `j-Directory` - `diroffsety {Number}` optionnel, `Y` offset (défaut: `0`) - `diroffsetx {Number}` optionnel, `X` offset (défaut: `0`) - `dirplaceholder {String}` en option, un espace réservé pour `j-Directory` - `dirempty {String}` facultatif, ajoute un champ vide pour `j-Directory` - `dirkey {String}` en option, un nom de clé pour la lecture de `text` dans `dirsource` (par défaut : `name`) - `dirvalue {String}` en option, un nom de clé pour la lecture de `value` dans `dirsource` (par défaut : `id`) - `direxclude {Boolean}` optionnel, exclure une valeur actuelle de `j-Directory` (défaut: `true`) - `dirsearch {Boolean|String}` optionnel, peut désactiver la recherche dans `j-Directory` (defaut: `true`) ou `{String}` (nom clé) peut cartographier une valeur pour la recherche - `dirraw {Boolean}` facultatif, peut désactiver l'échappement des articles pour `j-Directory` (defaut: `false`) - `dirdetail {String}` optionnel, un lien vers la fonction `function(val, next(NEW_TEXT))` (objectif pour `dirsource`) - `dirfilter {String}` optionnel, une méthode conditionnelle de filtre en ligne, par exemple: `value.id !== 2` (objectif pour `dirsource`) - __NEW__: `dirrawrender {Boolean}` facultatif, si le `dirsource` ne comprend pas la valeur, il rendra une valeur première (defaut: `true`) - `mask {String}` optionnel, peut contenir une masque sous la forme de `###/##` (`#` est remplacé par un char) - `maskregexp {String}` facultatif, peut contenir RegExp pour chaque char dans le formulaire `\d,\d,\d,null,\d,\d` (`,` est délimité) - `masktidy {Boolean}` optionnel, le composant ne retourne que les chars crus sans chars fixes (defaut: `false`) - `autosource {String}` un chemin vers la source de recherche `Array` (__NEW__) ou `function(search, render(arr))` pour la recherche dynamique - `autovalue {String}` est une voie de propriété pour la valeur en `autosource`, par défaut: `name` - `autoexec {String}` méthode de route `function(item, next(value_to_input))` - `searchalign {Number}` Il est possible d'alligner l'icône `type:search` Pour quitter (`2`ou bien (`1`Le défaut - `forcevalidation {Boolean}` permet la validation de force pour `phone` et `email` (défaut: `true`) - `camouflage {Boolean|String}` masque la valeur dans l'entrée après que l'événement `blur` est déclenché (defaut: `false`) ou peut être `String` qui sera utilisé comme camouflage - `monospace {Boolean}` permet la phonture `monospaced` (défaut : `false`) - `multiple {Boolean}` permet les boîtes de contrôle si `dirsource` n'est pas vide - `tabindex {Number}` ajoute un indice tab (defaut : `0`) - `tabs {Boolean}` permet des panneaux pour multilines (defaut: `true`) - Édition de champ de texte de bloc `readonly {Boolean}` (defaut: `false`) - `transform {String}` un lien vers le `function(value, config)` pour la transformation des valeurs entrées - `multiline {Boolean}` ne fonctionne que avec le type `radiobutton`. - `separator {String|Boolean}` : un séparateur pour plusieurs valeurs rendues - `realtime {Boolean}` permet la connexion en temps réel (defaut: `true`) - `exec {String}` un lien vers le `function(value, element)` qui sera évalué si l'entrée est affectée __Intéressant :__ - `type:date` nécessite le composant __`datepicker`__ - `type:time` nécessite le composant __`timepicker`__ - `dirsource:path.to.datasource` nécessite le composant __`directory`__ - si `licon` ou `ricon` commence par `!` alors le composant restitue une valeur brute au lieu de `icon` - La classe `ui-input-ok` est liée lorsque l'entrée est valide et remplie - `SET('path', 'camouflage', 'show');` montre la valeur de 2000 ms ```video https://www.youtube.com/watch?v=Ne3ezaP0w34 ``` Utilisez-le avec ``. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT. ```html example.html
Framework I agree with terms Notes Frameworks
City
Tags
Date
Search
Password
ZIP
Email
Phone
Gender
Gender
Your age
```