# Text Input (Saisie de texte)

## Vue d'ensemble

* [Définir le type de clavier](#set-keyboard-type)
* [Mise en place des mots de passe](#set-up-for-passwords)
* [Style de la saisie de texte](#style-the-text-input)
* [Modifier la taille de saisie du texte](#edit-the-text-input-size)
* [Ajouter un espacement](#add-spacing)
* [Blocs d'événements](#events)
* [Blocs de propriété](#properties)

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn67o_q6N9YPaLDAEF%2Ftext-input-%E2%9C%95-fig-1.png?alt=media)

## Définir le type de clavier <a href="#set-keyboard-type" id="set-keyboard-type"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn67pwFbEqVxqsfmKS%2Ftext-input-%E2%9C%95-fig-2.png?alt=media)

Vous pouvez choisir parmi les types de claviers suivants :

* **Default keyboard:** Affiche le clavier par défaut de votre appareil
* **Email Address:** Affiche un clavier alphanumérique pour accepter les adresses électroniques
* **Numeric:** Affiche un clavier avec uniquement des chiffres ; il est similaire au clavier du téléphone
* **Phone Pad:** Affiche un clavier de téléphone ; il est similaire au clavier numérique

## Mise en place des mots de passe <a href="#set-up-for-passwords" id="set-up-for-passwords"></a>

​

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn67rmFvcpwC8y-ad4%2Ftext-input-%E2%9C%95-fig-3.png?alt=media)

Vous pouvez également configurer la saisie de texte pour les mots de passe comme indiqué ci-dessous en utilisant le commutateur de SecureTextEntry. Ce commutateur remplacera le texte par \* au fur et à mesure que les utilisateurs le taperont.

Pour activer SecureTextEntry, cliquez sur l'onglet des propriétés avancées pour le composant de saisie de texte. Faites défiler vers le bas jusqu'à l'onglet SecureTextEntry et mettre le commutateur sur "True".

![](https://lh4.googleusercontent.com/omT1m9fLlApRjOmKpjDj2yoSKYQta1hfWi3lSw-Atz0cOt8WHQFzQMaW37b0OnXWJOcS4GyPnziQ-Yn_Bv_G499Uddz9dMMT3ZAhlfD-av2NTjwj2pVfHrMglp0qQ5wi4xbDzddQ)

​

## Style de la saisie de texte <a href="#style-the-text-input" id="style-the-text-input"></a>

Vous pouvez personnaliser le composant Text Input avec les propriétés suivantes :

* **Hint:** Indication du texte qui disparaît lorsque l'utilisateur commence à taper dans la zone de saisie
* **Text:** Texte qui apparaît sur la saisie de texte
* **Visible:** Pour voir le texte saisi dans votre application, réglez le commutateur sur "True"
* **Border**
  * **Width:** Indiquez la largeur que vous souhaitez donner à la bordure du texte saisi
  * **Color:** Choisissez une couleur pour la bordure de la saisie du texte
  * **Style:** Choisissez si vous souhaitez que la bordure soit en pointillés, en tirets ou en traits pleins
  * **Radius:** Indiquez le contour que vous souhaitez pour les bords de la bordure pour la saisie du texte

## Modifier la taille de saisie du texte <a href="#edit-the-text-input-size" id="edit-the-text-input-size"></a>

Vous pouvez définir la hauteur du texte saisi à l'aide de la propriété Height et la largeur du texte saisi à l'aide de la propriété Width.

**Height**

* **Fill container -** La saisie de texte remplit tout l'écran verticalement
* **Fit contents (Recommended) -** La hauteur de l'entrée de texte change en fonction du contenu qu'elle contient
* **Relative size -** La saisie de texte remplit le pourcentage spécifié de l'écran
* **Absolute size -** Dimensionne le texte saisi en fonction d'un nombre déterminé de pixels

**Width**

* **Fill container -** La saisie de texte remplit tout l'écran horizontalement
* **Fit contents -** La largeur de l'entrée de texte change en fonction du contenu qu'elle contient
* **Relative size -** La saisie de texte remplit le pourcentage spécifié de l'écran
* **Absolute -** Dimensionne le texte saisi en fonction d'un nombre déterminé de pixels

## Ajouter un espacement <a href="#add-spacing" id="add-spacing"></a>

Vous modifiez l'espacement et le positionnement du texte saisi à l'aide des propriétés Margin (Marge) et Padding (Remplissage).

**Margin**

* Vous pouvez spécifier l'espace que vous souhaitez entre les bords du texte saisi et l'écran en utilisant des valeurs en pixels ou en pourcentage.

**Padding**

* Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du texte saisi en utilisant des valeurs en pixels ou en pourcentage.

## Événements <a href="#events" id="events"></a>

### Click <a href="#click" id="click"></a>

![Cet événement se déclenche lorsque l'utilisateur clique sur le composant de saisie de texte.](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5a2sYZuetyRqmTAnj%2Fti_click.png?alt=media\&token=25a46dae-d4a5-4972-a0f1-07fa8fe45b2c)

### Unfocus  <a href="#unfocus" id="unfocus"></a>

![Cet événement se déclenche lorsque le composant perd son focus, c'est-à-dire que l'utilisateur clique sur un autre composant.](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5dKr2QQBdRDoyZtW9%2F-MA5djt4JlixOOeVW74q%2Fti_unfocus.png?alt=media\&token=213c1219-6a0c-485d-b156-ba5a2a673b3b)

### Submit  <a href="#submit" id="submit"></a>

![Cet événement se déclenche lorsque le bouton "Entrer" ou "Envoyer" est appuyé sur le clavier de l'appareil.](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5dKr2QQBdRDoyZtW9%2F-MA5dlY4qkjBd_s4GyU-%2Fti_submit.png?alt=media\&token=25dfb7d9-67ab-4a80-85ca-bb6cc18422f4)

### Changes <a href="#changes" id="changes"></a>

![Cet événement se déclenche chaque fois qu'un caractère est ajouté ou supprimé dans la saisie de texte.](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5dKr2QQBdRDoyZtW9%2F-MA5dmbJLTkuz23eY4Cl%2Fti_changes.png?alt=media\&token=23b863b9-4dfa-4513-9c84-a0ebe96cddfb)

​

## Propriétés <a href="#properties" id="properties"></a>

### Border Width <a href="#border-width" id="border-width"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5aTPjSiWT8qLMGaiA%2Fti_border_width.png?alt=media\&token=5f96051d-a042-4f0d-b36e-fa1b6b056fb6)

La valeur de la largeur de la bordure correspond à la taille de la bordure autour de la saisie de texte. Les modifications de la couleur et du style de la bordure doivent être effectuées dans le concepteur.

### Computed Dimensions  <a href="#computed-dimensions" id="computed-dimensions"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5asEo7RDnQ1qs9Qpd%2Fti_ch.png?alt=media\&token=4b7ec718-e2ec-4da2-a42f-3b60e187e5e4)

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5atbGjTB-gWi2vXvb%2Fti_cw.png?alt=media\&token=1b06e443-d011-4b65-a00f-7f89a0f916e1)

Les blocs `Computed Height` et `Computed Width` renvoient les dimensions à l'écran de la saisie de texte, après qu'elle ait été rendue sur l'écran de l'appareil. La valeur renvoyée est un nombre entier, représentant la taille du composant, en pixels.

### Height  <a href="#height" id="height"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5bEshBzYl7lXX3Oqb%2Fti_height.png?alt=media\&token=ec49f84a-d91c-4b44-9ece-38ab0fcab5ac)

Les blocs `Set` et `Get` Height (Hauteur) fonctionnent avec la propriété Height du composant Text Input. Les valeurs d'entrée acceptables sont :

* Number of Pixels (Nombre de pixels)
* Percentage Height (Pourcentage Hauteur)
* "Fit Contents" (Contenu adapté)
* "Fill Container" (Remplir le conteneur)

### Hint  <a href="#hint" id="hint"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5bkpVriymWTNG-Iqk%2Fti_hint.png?alt=media\&token=ce5854bf-a4b2-47ea-92fe-bf0a2cbb7a3d)

Les indications `Set` et `Get` fonctionnent avec l'invite qui s'affiche dans la zone de saisie de texte, avant que l'utilisateur ne commence à taper. Toute chaîne de texte ou tout nombre peut être utilisé comme indice.

### Keyboard Type  <a href="#keyboard-type" id="keyboard-type"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5bm0rDGkgVQWmIw_p%2Fti_keyboard_type.png?alt=media\&token=239c04c2-a084-4489-a12e-f880b42ac9b5)

La propriété `Set`and `Get`keyboard type" vous permet de contrôler la version du clavier qui s'affiche à l'écran lorsque l'utilisateur commence à taper. Les valeurs acceptables sont :

* default (par défaut)
* email address (adresse mail)
* numeric (numérique)
* phone pad (clavier téléphonique)

### Text  <a href="#text" id="text"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5bnBUd9TyKtt2i6eS%2Fti_text.png?alt=media\&token=375734d3-0438-436a-a74d-fd282d9819a5)

Les propriétés `Set`et `Get`  du bloc Text fonctionne avec la chaîne de texte qui s'affiche dans la saisie de texte.

### Visible  <a href="#visible" id="visible"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5bp3zpcl1QFPgGKkz%2Fti_visible.png?alt=media\&token=37ef352b-3a0e-496b-abd8-f90a28b163c1)

Les blocs `Set` et `Get`Visible sont utilisés pour afficher ou masquer l'ensemble de la composante Saisie de texte. Les valeurs acceptables sont :

* True (Vrai)
* False (False)

### Width <a href="#width" id="width"></a>

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MA5XvDmBvuGLtYvRyNI%2F-MA5bqA4oDWqVa7VebqP%2Fti_width.png?alt=media\&token=79e9bb36-3338-47d3-a9e7-c5f3eba72da5)

Les blocs `Set` et `Get` Width fonctionnent avec la propriété Width (Largeur) du composant Text Input. Les valeurs acceptables sont .

* Number of Pixels (Nombre de Pixels)
* Percentage Width (Largeur en Pourcentage)
* "Fit Contents" (Contenu adapté)
* "Fill Container" (Remplir le conteneur)