Alcuni la chiamano magia: la capacità di far apparire improvvisamente oggetti dal nulla. Puoi creare questo tipo di magia sul tuo sito web utilizzando poche righe di JavaScript. Le caselle di testo, ad esempio, sono buoni elementi HTML da utilizzare quando si impara a far apparire gli oggetti in modo dinamico. Invece di incorporarli nel codice quando si progetta la pagina Web, aggiungere le caselle di testo secondo necessità e allo stesso tempo impressionare i visitatori del sito.
Creazione di caselle di testo
Prima di materializzare una casella di testo, devi capire che cos'è una casella di testo. L'HTML lo riconosce come un tag di input, come mostrato nell'esempio seguente:
Questo tag di input crea una casella di testo che ha due attributi importanti; id e tipo. L'attributo tipo, il cui valore è "text", indica ai browser di creare una casella di testo invece di un altro tipo di controllo come un pulsante. L'attributo id, che è facoltativo, può tornare utile se è necessario manipolare la casella di testo in un secondo momento. L'opzione valore, anch'essa facoltativa, contiene il valore che desideri visualizzare nella casella di testo quando si apre la pagina Web.
Caselle di testo dinamiche
All'HTML non interessa quando si definiscono gli attributi di un elemento, purché si forniscano valori da qualche parte. Ciò significa che hai la possibilità di creare dinamicamente un elemento casella di testo e impostarne gli attributi ogni volta che lo desideri. La funzione document.createElement lo rende possibile come mostrato di seguito:
var box = document.createElement ("input");
Questo è tutto ciò che serve per creare un elemento di input HTML e assegnarlo a una variabile denominata "box". L'oggetto box non diventa una casella di testo fino a quando non dai al suo attributo tipo un valore "text" come mostrato in questo esempio:
box.type = "text";
Integrazione di pagine web
Il codice seguente aggiunge la casella di testo al documento HTML, utilizzando l'utile funzione appendChild:
document.body.appendChild (box);
Se desideri aggiungere la casella di testo dopo un controllo specifico, utilizza invece la seguente istruzione:
document.getElementById ("some_Element_ID"). appendChild (box);
Sostituisci "some_Element_ID" con il nome dell'elemento dopo il quale desideri aggiungere la casella di testo. Ad esempio, se quell'elemento fosse un pulsante il cui ID era "button1", l'istruzione appendChild apparirà come segue:
document.getElementById ("button1"). appendChild (box);
Attributi opzionali
La tua nuova casella di testo funzionerà perfettamente usando questo codice. Crea semplicemente una funzione JavaScript che contiene l'istruzione e chiamala ogni volta che hai bisogno di una casella di testo. Tuttavia, puoi anche impostare il valore della casella di testo e gli attributi ID come segue:
box.value = boxValue; box.id = boxID;
Passa i valori di boxValue e boxID alla funzione e applica quegli attributi alla casella di testo. Se si assegna un valore ID, è possibile utilizzarlo in un secondo momento per aggiornare le proprietà della casella di testo come mostrato nell'esempio seguente:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "rosso";
La prima istruzione ottiene un riferimento alla casella di testo e l'ultima istruzione cambia il colore di sfondo della casella di testo in rosso.