# j-Textbox

> j-Textbox: NEW INNERLABLE {Boolean} facultatif, permettant l'étiquette interne (defaut: vrai)

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

__Configuration__ :

- `type {String}` (Optionnel) peut être `email`, `phone`, `password`, `date`, `number`, `search`, `lower`, `upper` ou à l’écart (defaut)
- `required {Boolean}` (facultatif) active "obligatoire" (par défaut : `false`)
- Icône `icon {String}` (facultatif) pour l'étiquette, par ex. `home`, `cog`, etc.
- L'icône `icon2 {String}` (optionnel) dans la boîte droite par exemple `home`, `cog`, etc.
- Libellé `label {String}` (facultatif) (la valeur par défaut est le contenu HTML)
- `autofocus {Boolean}` (optionnel) se concentre sur l'entrée (defaut: `false`)
- `align {String}` (optionnel) `left` (défaut), `right` ou `center`
- `autofill {Boolean}` (optionnel) permet la fonctionnalité d'autofill du navigateur (defaut: `false`)
- `placeholder {String}` (optionnel) ajoute un texte `placeholder` à l'entrée
- `maxlength {Number}` (optionnel) définit une longueur maximale des chars
- `minlength {Number}` (optionnel) définit une longueur minimale des chars
- `validation {String}` (optionnel) une condition pour `evaluation` par exemple `value.match(/[a-z]+/) !== null`
- `format {String}` (optionnel) formatage de sortie par exemple pour les dates (defaut: `yyyy-MM-dd`)
- `increment {Boolean}` (optionnel) permet des contrôles pour l'augmentation des chiffres (defaut: `false`)
- `keypress {Boolean}` (optionnel) peut désactiver les valeurs liées en temps réel (defaut: `true`)
- `delay {Number}` (optionnel) peut augmenter/déclencher le retard pour l'engagement en temps réel (defaut: `300` ms)
- `disabled {Boolean}` (facultatif) désactive ce composant
- `error {String}` (optionnel) ajoute un texte `string` sous l'entrée
- `iconclick {String}` (optionnel) doit contenir un lien vers une fonction
- `autocomplete {String}` (optionnel) doit contenir un lien à une fonction, est déclenché sur l'événement `focus`
- `spaces {Boolean}` (optionnel) permet des espaces sinon il les supprime (defaut: `true`)
- `readonly {Boolean}` en option, `false` par défaut
- __NEW__ `innerlabel {Boolean}` optionnel, permettant l'étiquette interne (defaut: `true`)

__Intéressant :__

- `type:date` utilise le composant `calendar`.

Utilisez-le avec `<ui-component name="textbox">`. 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
<div style="width:400px">
	<ui-component name="textbox" path="form.name" config="required:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
	<br />
	<ui-component name="textbox" path="form.email" config="required:true;type:email;autofill:email;icon:envelope;error:E-mail must be in format email@domain.com">E-mail</ui-component>
	<br />
	<ui-component name="textbox" path="form.password" config="type:password">Password</ui-component>
	<br />
	<ui-component name="textbox" path="form.note">Note</ui-component>
	<br />
	<ui-component name="textbox" path="form.phone" config="type:phone">Phone</ui-component>
	<br />
	<ui-component name="textbox" path="form.age" config="type:number;increment:true">Age</ui-component>
	<br />
	<ui-component name="textbox" path="form.search" config="type:search">Search</ui-component>
	<hr />
	<h2>Inner label</h2>
	<ui-component name="textbox" path="form.name" config="required:true;innerlabel:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
</div>

<script>
	var form = {};
	form.email = '@';
	form.age = 30;
</script>
```