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

HTML DOM Textareaオブジェクトとは？作成方法からプロパティ・メソッドまで徹底解説

HTML DOM の Textarea オブジェクトは、HTMLドキュメント内の <textarea> 要素を JavaScript から操作するためのインターフェースです。このオブジェクトを使うことで、複数行テキスト入力欄の値の取得・変更や、表示サイズの調整などが動的に行えます。

Textareaオブジェクトの作成方法

新しい Textarea オブジェクトを作成するには、document.createElement() メソッドを使用します。

構文

document.createElement("TEXTAREA");

この構文を実行すると、まだページには追加されていない新しい textarea 要素がメモリ上に生成されます。その後、appendChild() などを利用してドキュメントに追加することで画面に表示されます。

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

Textarea オブジェクトには、要素の状態や属性を取得・設定できる多数のプロパティが用意されています。代表的なものを以下にまとめました。

プロパティ説明
autofocusページ読み込み時にテキストエリアへ自動的にフォーカスを当てるかどうかを取得・設定します。
defaultValueテキストエリア要素のデフォルト値（初期値）を取得・設定します。
colsテキストエリアの横幅（文字数単位）を指定する cols 属性の値を取得・設定します。
disabledテキストエリアが無効化（操作不可）されているかどうかを取得・設定します。
formテキストエリアを囲んでいる form 要素への参照を返します。
maxLength入力可能な最大文字数を指定する maxLength 属性の値を取得・設定します。
nameフォーム送信時に使われる name 属性の値を取得・設定します。
placeholder入力前に表示されるヒントテキストである placeholder 属性の値を取得・設定します。
readOnlyテキストエリアの内容を読み取り専用にするかどうかを取得・設定します。
requiredフォーム送信時に入力必須とする required 属性の値を取得・設定します。
rowsテキストエリアの高さ（行数）を指定する rows 属性の値を取得・設定します。
typeテキストエリアが属するフォーム要素のタイプ（「textarea」）を返します。
valueテキストエリアに入力されている現在の内容を取得・設定します。
wrapテキストの折り返し方法を指定する wrap 属性の値を取得・設定します。

Textareaオブジェクトのメソッド

Textarea オブジェクトには、以下のような便利なメソッドが用意されています。

メソッド説明
select()テキストエリア内のすべての内容を選択状態にします。

実装例：Textareaオブジェクトのサンプルコード

それでは、実際に Textarea オブジェクトを使って textarea 要素を動的に生成する例を見てみましょう。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>DOM Textarea Object Demo</h1>
<button onclick="create()" class="btn">Create Textarea</button>
<script>
    function create() {
        var ta = document.createElement("TEXTAREA");
        ta.innerHTML = "Hi! I'm a textarea element in an HTML document with some dummy text.";
        ta.setAttribute('rows', '8');
        document.body.appendChild(ta);
    }
</script>
</body>
</html>

実行結果

HTML DOM Textareaオブジェクトとは？作成方法からプロパティ・メソッドまで徹底解説

上記のコードをブラウザで開き、「Create Textarea」ボタンをクリックしてください。

ボタンがクリックされると、createElement("TEXTAREA") によって新しい textarea 要素が生成され、ダミーテキストが挿入されたうえで、rows 属性に 8 が設定されてページに追加されます。

HTML DOM Textareaオブジェクトとは？作成方法からプロパティ・メソッドまで徹底解説

このように、JavaScript の Textarea オブジェクトを活用すれば、ユーザーの操作に応じてテキスト入力欄を自由に動的生成・制御できます。フォームの拡張やインタラクティブなUIの実装にぜひ活用してみてください。

  1. HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説

    HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注