Alguns chamam isso de mágica - a habilidade de fazer objetos aparecerem repentinamente do nada. Você pode criar esse tipo de mágica em seu site usando algumas linhas de JavaScript. Caixas de texto, por exemplo, são bons elementos HTML para usar ao aprender a fazer objetos aparecerem dinamicamente. Em vez de incluí-los em seu código ao projetar sua página da Web, adicione caixas de texto conforme necessário e impressione os visitantes do site ao mesmo tempo.
Criação de caixa de texto
Antes de fazer uma caixa de texto se materializar, você deve entender o que é uma caixa de texto. HTML a conhece como uma tag de entrada, conforme mostrado no exemplo a seguir:
Essa tag de entrada cria uma caixa de texto que possui dois atributos importantes; id e tipo. O atributo type, cujo valor é "text", diz aos navegadores para criar uma caixa de texto em vez de outro tipo de controle, como um botão. O atributo id, que é opcional, pode ser útil se você precisar manipular a caixa de texto posteriormente. A opção de valor, que também é opcional, contém o valor que você gostaria de ver na caixa de texto quando a página da Web for aberta.
Caixas de texto dinâmicas
HTML não se importa quando você define os atributos de um elemento, desde que você dê a eles valores em algum lugar. Isso significa que você pode criar um elemento de caixa de texto dinamicamente e definir seus atributos a qualquer momento. A função document.createElement torna isso possível conforme mostrado abaixo:
var box = document.createElement ("entrada");
Isso é tudo o que é preciso para criar um elemento de entrada HTML e atribuí-lo a uma variável chamada "caixa". O objeto de caixa não se torna uma caixa de texto até que você atribua a seu atributo type o valor "text", conforme mostrado neste exemplo:
box.type = "texto";
Integração de página da web
O código abaixo anexa a caixa de texto ao documento HTML, usando a útil função appendChild:
document.body.appendChild (caixa);
Se você deseja anexar a caixa de texto após um controle específico, use a seguinte instrução:
document.getElementById ("some_Element_ID"). appendChild (caixa);
Substitua "some_Element_ID" pelo nome do elemento após o qual você gostaria de acrescentar a caixa de texto. Por exemplo, se esse elemento fosse um botão cujo ID fosse "button1", a instrução appendChild seria exibida da seguinte maneira:
document.getElementById ("button1"). appendChild (caixa);
Atributos opcionais
Sua nova caixa de texto funcionará perfeitamente usando este código. Basta criar uma função JavaScript que contenha a instrução e chamá-la sempre que precisar de uma caixa de texto. No entanto, você também pode definir o valor da caixa de texto e os atributos de ID da seguinte maneira:
box.value = boxValue; box.id = boxID;
Passe os valores de boxValue e boxID para a função, e ela aplica esses atributos à caixa de texto. Se você atribuir um valor de ID, poderá usá-lo posteriormente para atualizar as propriedades da caixa de texto, conforme mostrado no exemplo abaixo:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "vermelho";
A primeira instrução obtém uma referência à caixa de texto e a última instrução altera a cor de fundo da caixa de texto para vermelho.