JavaScriptで動的にテキストボックスを作成する方法

それを魔法と呼ぶ人もいます-オブジェクトをどこからともなく突然出現させる機能。数行のJavaScriptを使用して、Webサイトでこの種の魔法を作成できます。たとえば、テキストボックスは、オブジェクトを動的に表示する方法を学習するときに使用するのに適したHTML要素です。Webページをデザインするときにそれらをコードに組み込む代わりに、必要に応じてテキストボックスを追加し、同時にサイト訪問者に印象を与えます。

テキストボックスの作成

テキストボックスを具体化する前に、テキストボックスとは何かを理解する必要があります。次の例に示すように、HTMLはそれを入力タグとして認識します。

この入力タグは、2つの重要な属性を持つテキストボックスを作成します。IDとタイプ。値が「text」であるtype属性は、ボタンなどの別のタイプのコントロールの代わりにテキストボックスを作成するようにブラウザに指示します。オプションのid属性は、後でテキストボックスを操作する必要がある場合に便利です。値オプション(これもオプション)には、Webページを開いたときにテキストボックスに表示する値が含まれています。

動的テキストボックス

HTMLは、要素の属性をどこかに値を指定する限り、要素の属性を定義するときに関係ありません。これは、テキストボックス要素を動的に作成し、いつでもその属性を設定できることを意味します。document.createElement関数は、以下に示すようにこれを可能にします。

var box = document.createElement( "input");

HTML入力要素を作成し、それを「box」という名前の変数に割り当てるのに必要なのはこれだけです。この例に示すように、そのtype属性に「text」の値を指定するまで、boxオブジェクトはテキストボックスになりません。

box.type = "text";

Webページの統合

以下のコードは、便利なappendChild関数を使用してテキストボックスをHTMLドキュメントに追加します。

document.body.appendChild(box);

特定のコントロールの後にテキストボックスを追加する場合は、代わりに次のステートメントを使用してください。

document.getElementById( "some_Element_ID")。appendChild(box);

「some_Element_ID」を、テキストボックスを追加する要素の名前に置き換えます。たとえば、その要素がIDが「button1」のボタンである場合、appendChildステートメントは次のように表示されます。

document.getElementById( "button1")。appendChild(box);

オプションの属性

新しいテキストボックスは、このコードを使用して完全に機能します。ステートメントを含むJavaScript関数を作成し、テキストボックスが必要なときにいつでも呼び出すだけです。ただし、テキストボックスの値とID属性を次のように設定することもできます。

box.value = boxValue; box.id = boxID;

boxValueとboxIDの値を関数に渡すと、それらの属性がテキストボックスに適用されます。ID値を割り当てると、次の例に示すように、後でそれを使用してテキストボックスのプロパティを更新できます。

var boxObject = document.getElementById(boxID); boxObject.style.backgroundColor = "red";

最初のステートメントはテキストボックスへの参照を取得し、最後のステートメントはテキストボックスの背景色を赤に変更します。