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

HTML DOM Textareaのplaceholderプロパティとは？取得・設定方法をサンプルコード付きで解説

HTML DOM の Textarea placeholder プロパティを使用すると、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定された placeholder 属性の値を取得したり、変更したりすることができます。

placeholder 属性は、ユーザーが入力する前にテキストエリア内に表示されるヒントテキスト（例：「お問い合わせ内容をご記入ください」など）を指定するために使われます。JavaScriptからこの値を動的に操作できるのが、このプロパティの特徴です。

構文

placeholder プロパティの基本的な構文は以下の通りです。

1. placeholder の値を取得する

object.placeholder

2. placeholder の値を設定する

object.placeholder = "テキスト"

サンプルコード

それでは、HTML DOM Textarea placeholder プロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすると、テキストエリアに設定されている placeholder 属性の値が画面に表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
    .show {
        margin: 1rem 0;
        font-size: 1.5rem;
    }
</style>
<body>
<h1>DOM Textarea placeholder Property Demo</h1>
<textarea placeholder="Hi! I'm placeholder text of a textarea element" rows="8" cols='20'></textarea>
<button onclick="set()" class="btn">Show Placeholder</button>
<div class="show"></div>
<script>
    function set() {
        document.querySelector('.show').innerHTML = document.querySelector("textarea").placeholder;
    }
</script>
</body>
</html>

実行結果

ページを開くと、テキストエリア内にあらかじめ設定されたプレースホルダーテキストが表示されます。

次に、「Show Placeholder」ボタンをクリックしてみてください。

ボタンをクリックすると、JavaScript の set() 関数が実行され、document.querySelector("textarea").placeholder によって取得した placeholder 属性の値が、下の div 要素内に出力されます。

ポイントまとめ

  • textarea.placeholder で現在のプレースホルダーの値を取得できます。
  • textarea.placeholder = "新しいテキスト" とすることで、プレースホルダーを動的に変更できます。
  • フォームのユーザビリティ向上のため、入力例や説明文をプレースホルダーとして設定するのが一般的です。
  1. HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma

  2. HTML DOM Textareaのrequiredプロパティとは？構文と使い方をサンプルコード付きで解説

    HTML DOM の Textarea required プロパティは、HTMLドキュメント内のテキストエリア（<textarea>要素）に設定された required 属性の値を取得・変更するためのプロパティです。required 属性は、フォーム送信時に入力が必須であることを示す属性です。この属性が true に設定されている場合、テキストエリアが空のままではフォームを送信できなくなります。構文required プロパティの構文は以下のとおりです。1. required の値を取得するobject.required2. required の値を設定するobject.requir