j-Textbox

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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.

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>