Boite de saisie

L’acteur boite de saisie permet de créer des champs de saisies personnalisables.

Sommaire

🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule

Propriétés

L’acteur boite de saisie possède le champ Type de saisie qui va dicter le comportement de cet acteur en fonction du type sélectionné dont chaque choix sera détaillé plus bas.

Les propriétés ci-dessous ont toujours le même comportement, peu importe le Type de saisie ; celles qui en dépendent sont détaillées dans la section Type de saisie.

Actif?

this.properties.enabled · boolean · défaut true · modifie : Style CSS

Permet d’activer / désactiver le champ de saisie.

Auto complétion?

this.properties.autocomplete · boolean · défaut false

Activation de l’auto-complétion.

Permet d’activer / désactiver la saisie automatique sur les navigateurs.

Ce champ est inutile pour les Type de saisie suivants : Mot de passe / Curseur / Couleur.

État de validation

this.properties.validationState · 'default' | 'valid' | 'invalid' · défaut 'default' · modifie : Gabarit

État de validation de l’acteur.

Permet de donner une décoration prédéfinie au champ de saisie.

Lecture seule?

this.properties.isReadOnly · boolean · défaut false

En lecture seule ?

Permet d’activer / désactiver la saisie de valeur dans le champ de saisie.

Ce champ est inutile pour les Type de saisie suivants : Curseur / Couleur.

Longueur max

this.properties.maxLength · string · défaut null

Longueur maximum du texte en nombre de caractère. Par défaut, il n’y a pas de limite (=null).

Permet de limiter la taille de la chaine de caractère de Valeur.

Le caractère vide ‘espace’ est comptabilisé comme tout autre caractère.

Mode de saisie

this.properties.inputmode · 'default' | 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' · défaut 'default'

Type de clavier à présenter sur les afficheurs nomades.

Ce champ permet de conditionner le type de clavier qui s’affiche sur les appareils mobiles et tablettes.

Options

this.properties.options · string · défaut ''

Chaîne JSON contenant un tableau de texte à proposer Array.<String>.

Pas entre deux valeurs

this.properties.step · string · défaut null

Pas entre deux valeurs ou heures. Valable pour les types sauf 'number', 'range' et 'time'. Pour ‘time’, une valeur exprimée en seconde inférieure à 60 indique que les secondes sont à saisir.

Taille

this.properties.size · 'default' | 'large' | 'small' · défaut 'default' · modifie : Rendu

Taille de l’acteur.

La propriété spécifique Taille permet de changer celle de l’acteur.

Cette propriété possède trois options :

  • Par défaut.
  • Grand.
  • Petit.

Seul le choix par défaut vous laisse la possibilité de modifier la taille du texte. Les autres options prennent le pas sur tout autre réglage.

Texte si vide

this.properties.placeHolder · string · défaut ''

Chaîne de remplacement lorsque l’acteur est vide. Valable uniquement pour les types 'text', 'password' et 'number'

Type de saisie

this.properties.inputType · 'text' | 'password' | 'number' | 'range' | 'date' | 'time' | 'color' · défaut 'text'

Variante de boite de saisies.

Valeur

this.properties.value · string · défaut '' · modifie : Taille

Texte ou nombre.

Valeur max

this.properties.max · string · défaut null

Valeur ou date ou heure maximale. Valable pour tous les types sauf 'text', 'color' et 'password'

Valeur min

this.properties.min · string · défaut null

Valeur ou date ou heure minimale. Valable pour tous les types sauf 'text', 'color' et 'password'

Informations

Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.

hasOptions

this.hasOptions · 🔒 lecture seule · boolean

Obtient la valeur indiquant si l’acteur a des options.

options

this.options · 🔒 lecture seule · Array.<String>

Obtient les options sous forme de tableau.

Hérite de

Outre ce qui est décrit ici, l’acteur a tout ce que décrit l’acteur de base : propriétés communes (taille, disposition, aspect, texte, bordures, effets…), évènements communs (cycle de vie, souris, clavier…) et membres accessibles par script.

Il hérite aussi de :

  • InputBase : Base pour les acteurs de saisie.

Type de saisie

TEXTE / MOT DE PASSE

Valeur

La propriété spécifique Valeur permet de définir la valeur actuelle de l’acteur.

  • Pour TEXTE la valeur attendue est une chaine de caractère.

  • Pour MOT DE PASSE la valeur attendue est une chaine de caractère et celle-ci ne sera pas affiché en clair au niveau du champ de saisie.

Texte si vide

La propriété spécifique Texte si vide permet de définir le texte à afficher lorsque le champ de saisie de l’acteur est vide. La valeur attendue est une chaîne de caractère.

Options

  • Pour TEXTE UNIQUEMENT

Permet de suggérer à l’utilisateur certaines options en dessous du champ de saisie lorsque le curseur est placé dans le champ de saisie.

Pour suggérer des éléments, il est nécessaire de suivre la syntaxe qui suit :

["Un Texte","autre texte","un exemple"]

NOMBRE

Valeur

La propriété spécifique Valeur permet de définir la valeur actuelle de l’acteur.

La valeur attendue est un nombre.

Texte si vide

La propriété spécifique Texte si vide permet de définir le texte à afficher lorsque le champ de saisie de l’acteur est vide.

La valeur attendue est une chaîne de caractère.

Valeur Min

Conditionne la valeur que doit prendre le Nombre en lui attribuant une borne négative.

Valeur Max

Conditionne la valeur que doit prendre le Nombre en lui attribuant une borne positive.

Pas entre deux valeur

Permet de conditionner l’incrémentation de la Valeur.

Options

Permet de suggérer à l’utilisateur certaines options de saisie en dessous du champ de saisie lorsque le curseur est placé dans le champ de saisie. Cependant, la valeur suggérée doit forcément respecter la valeur attendue dans le champ Valeur.

Pour suggérer des éléments, il est nécessaire de suivre la syntaxe qui suit :

["45","5000","1337"]

CURSEUR

Valeur Min

Conditionne la valeur que doit prendre le Curseur en lui attribuant une borne négative.

Valeur Max

Conditionne la valeur que doit prendre le Curseur en lui attribuant une borne positive.

Pas entre deux valeur

Permet de conditionner le pas du Curseur.

DATE

Valeur Min

Conditionne la valeur que doit prendre la Date en lui attribuant une borne négative.

Il est possible depuis l’inspecteur d’ouvrir l’aide à la sélection d’une date.

Valeur Max

Conditionne la valeur que doit prendre la Date en lui attribuant une borne positive.

Il est possible depuis l’inspecteur d’ouvrir l’aide à la sélection d’une date.

HEURE

Valeur Min

Conditionne la valeur que doit prendre l’Heure en lui attribuant une borne négative.

Il est possible depuis l’inspecteur d’ouvrir l’aide à la sélection d’une horaire.

Valeur Max

Conditionne la valeur que doit prendre l’Heure en lui attribuant une borne positive.

Il est possible depuis l’inspecteur d’ouvrir l’aide à la sélection d’une horaire.

COULEUR

Valeur

La propriété spécifique Valeur permet de définir la couleur de l’acteur.

La valeur attendue est un code hexadécimal.

Un outil permet de récupérer les codes hexadécimaux des couleur et est disponible à cette adresse.

Il est également possible de cliquer sur le bouton dans l’interface afin de choisir une couleur.