HTMLでテキストエリアに定型文を表示する方法

HTMLの<textarea id="text1">タグは、複数行の文章を入力できるフォーム部品です。開始タグと終了タグの間に文字を書くことで、ページを開いたときから定型文を表示できます。 AIプロンプトやテンプレート、問い合わせフォームなどでよく利用されます。

完成サンプル

HTMLコード

<textarea id="text1">ID
名前
メールアドレス
電話番号</textarea>

コードの解説

① textareaタグ

複数行の文章を入力できるHTMLタグです。

② id="text"

JavaScriptから取得するための名前です。

③ 開始タグと終了タグの間

開始タグと終了タグの間に書いた文字が、そのまま最初から表示されます。改行もそのまま保持されます。

表示される内容

ID
名前
メールアドレス
電話番号

JavaScriptで取得する

const text =
document.getElementById("text1").value;

入力欄の内容を取得します。ユーザーが編集した内容も取得できます。

コピーするJavaScript

function copyText(id){

    const textarea = document.getElementById(id);
    const text = textarea.value;

    navigator.clipboard.writeText(text);

    alert("コピーしました");

}

JavaScriptコード

<script>

function copyText(id){

    const textarea = document.getElementById(id);
    const text = textarea.value;

    navigator.clipboard.writeText(text);

    alert("コピーしました");

}

</script>

処理の流れ

HTMLに定型文を書いておく
ページを開くと最初から表示される
ユーザーが必要なら編集する
JavaScriptが入力内容を取得する
コピー機能でクリップボードへ保存する

ポイント

HTMLだけで定型文を表示できます。
JavaScriptは表示には不要です。
JavaScriptは取得・コピー・変更するときに使用します。
AIプロンプト・テンプレート・住所・CSV・メール文などの表示によく利用されます。