HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説

HTML DOMのInput Textオブジェクトは、<input>要素のうちtype="text"が指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。

本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。

Input Textオブジェクトの主なプロパティ

Input Textオブジェクトには、以下のようなプロパティが用意されています。これらを活用することで、JavaScriptからテキスト入力欄の状態や属性を動的に操作できます。

プロパティ説明
autocompleteテキストフィールドのautocomplete属性の値を設定または取得します。
autofocusページ読み込み時にテキストフィールドへ自動的にフォーカスを当てるかどうかを設定または取得します。
defaultValueテキストフィールドのデフォルト値（初期値）を設定または取得します。
disabledテキストフィールドが無効化されているかどうかを設定または取得します。
formテキストフィールドを含むフォームへの参照を返します。
maxLengthテキストフィールドに入力できる最大文字数（maxlength属性）を設定または取得します。
nameテキストフィールドのname属性の値を設定または取得します。
pattern入力値の検証に使用する正規表現パターン（pattern属性）を設定または取得します。
placeholderプレースホルダーとして表示されるヒントテキストを設定または取得します。
readOnlyテキストフィールドが読み取り専用かどうかを設定または取得します。
requiredフォーム送信前に入力が必須かどうかを設定または取得します。
sizeテキストフィールドの表示幅（size属性）を設定または取得します。
type読み取り専用プロパティ。フォーム要素の種類（ここでは常に"text"）を返します。
valueテキストフィールドのvalue属性の値（現在の入力内容）を設定または取得します。
listテキストフィールドに関連付けられたdatalist要素への参照を返します。

Input Textオブジェクトを作成する構文

JavaScriptでテキスト入力欄を持つinput要素を動的に生成するには、以下のように記述します。

var P = document.createElement("INPUT");
P.setAttribute("type", "text");

まずcreateElement("INPUT")でinput要素を生成し、続いてsetAttribute()メソッドでtype属性に"text"を指定しています。

実装例：ボタンクリックでテキスト入力欄を生成する

それでは、Input Textオブジェクトを使った具体的なサンプルコードを見てみましょう。以下の例では、ボタンをクリックするとtype="text"の入力フィールドがページ上に追加されます。

<!DOCTYPE html>
<html>
<head>
<script>
    function createText() {
        var P = document.createElement("INPUT");
        P.setAttribute("type", "text");
        document.body.appendChild(P);
    }
</script>
</head>
<body>
<h1>Textオブジェクトのサンプル</h1>
<p>下のボタンをクリックすると、type="text"の入力フィールドが作成されます</p>
<button onclick="createText()">CREATE</button>
<br><br>
USERNAME:
</body>
</html>

コードのポイント

  • createText()関数：createElement("INPUT")で新しいinput要素を生成し、type属性に"text"を設定します。
  • appendChild(P)：生成した入力フィールドをbody要素の子ノードとして追加し、画面に表示させます。
  • onclickイベント：CREATEボタンが押されるたびに、関数が呼び出されて新しいテキスト入力欄が追加されます。

実行結果

上記のコードをブラウザで開くと、まず「CREATE」ボタンだけが表示された画面が現れます。

「CREATE」ボタンをクリックすると、その直後にテキスト入力欄が動的に追加され、自由に文字を入力できるようになります。このように、DOM操作を組み合わせることで、ユーザーの操作に応じて柔軟にフォーム部品を生成できます。

まとめ

HTML DOMのInput Textオブジェクトを使えば、JavaScriptからテキスト入力欄を自由自在に制御できます。豊富なプロパティを組み合わせることで、入力文字数の制限や必須チェック、プレースホルダーの設定など、実用的なフォームを実装することが可能です。ぜひ実際のコードで試してみてください。

  1. HTML DOM Delオブジェクトとは？使い方とプロパティを解説

    HTML DOM の Del オブジェクトは、HTML の <del> 要素に関連付けられたオブジェクトです。このオブジェクトを使用することで、文書内の削除されたテキストを示す <del> 要素を作成したり、既存の要素にアクセスしたりすることができます。<del> 要素は、ドキュメントから削除された内容や取り消し線で表示したいテキストをマークアップする際に使われ、ブラウザ上では通常、テキストに打ち消し線が引かれた状態で表示されます。Del オブジェクトのプロパティDel オブジェクトには、以下の主要なプロパティが用意されています。番号プロパティと説明1cit

  2. HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

    HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input