Certains appellent cela de la magie - la capacité de faire apparaître soudainement des objets de nulle part. Vous pouvez créer ce genre de magie sur votre site Web en utilisant quelques lignes de JavaScript. Les zones de texte, par exemple, sont de bons éléments HTML à utiliser pour apprendre à faire apparaître des objets de manière dynamique. Au lieu de les intégrer dans votre code lorsque vous concevez votre page Web, ajoutez des zones de texte au besoin et impressionnez les visiteurs du site en même temps.
Création de zone de texte
Avant de matérialiser une zone de texte, vous devez comprendre ce qu'est une zone de texte. HTML le connaît comme une balise d'entrée, comme illustré dans l'exemple suivant:
Cette balise d'entrée crée une zone de texte qui a deux attributs importants; id et type. L'attribut type, dont la valeur est "texte", indique aux navigateurs de créer une zone de texte au lieu d'un autre type de contrôle tel qu'un bouton. L'attribut id, qui est facultatif, peut être utile si vous devez manipuler la zone de texte ultérieurement. L'option de valeur, également facultative, contient la valeur que vous souhaitez voir dans la zone de texte lorsque la page Web s'ouvre.
Boîtes de texte dynamiques
HTML ne se soucie pas lorsque vous définissez les attributs d'un élément tant que vous leur donnez des valeurs quelque part. Cela signifie que vous avez la possibilité de créer un élément de zone de texte de manière dynamique et de définir ses attributs à tout moment. La fonction document.createElement rend cela possible comme indiqué ci-dessous:
var box = document.createElement ("entrée");
C'est tout ce qu'il faut pour créer un élément d'entrée HTML et l'assigner à une variable nommée "box". L'objet boîte ne devient pas une zone de texte tant que vous ne donnez pas à son attribut type la valeur "text", comme illustré dans cet exemple:
box.type = "texte";
Intégration de pages Web
Ce code ci-dessous ajoute la zone de texte au document HTML en utilisant la fonction utile appendChild:
document.body.appendChild (boîte);
Si vous souhaitez ajouter la zone de texte après un contrôle spécifique, utilisez plutôt l'instruction suivante:
document.getElementById ("some_Element_ID"). appendChild (boîte);
Remplacez "some_Element_ID" par le nom de l'élément après lequel vous souhaitez ajouter la zone de texte. Par exemple, si cet élément était un bouton dont l'ID était "button1", l'instruction appendChild apparaîtrait comme suit:
document.getElementById ("bouton1"). appendChild (boîte);
Attributs facultatifs
Votre nouvelle zone de texte fonctionnera parfaitement en utilisant ce code. Créez simplement une fonction JavaScript contenant l'instruction et appelez-la chaque fois que vous avez besoin d'une zone de texte. Cependant, vous pouvez également définir la valeur de la zone de texte et les attributs d'ID comme suit:
box.value = boxValue; box.id = boxID;
Transmettez les valeurs de boxValue et boxID à la fonction et elle applique ces attributs à la zone de texte. Si vous attribuez une valeur d'ID, vous pouvez l'utiliser ultérieurement pour mettre à jour les propriétés de la zone de texte, comme indiqué dans l'exemple ci-dessous:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "rouge";
La première instruction obtient une référence à la zone de texte et la dernière instruction change la couleur d'arrière-plan de la zone de texte en rouge.