フォームによく使われる textarea に、ボタンクリックであらかじめ設定した文字を挿入するスニペットを作りました。
フォームのカスタマイズや、定型になる例文を挿入したいなど、textarea のカスタマイズとして参考にしてみてください。
.innerHTML
JavaScriptの.innerHTML は、要素の HTML を取得したり設定するプロパティです。
// 取得して変数に入れる場合
const content = element.innerHTML;
// 要素のHTMLに挿入する場合
element.innerHTML = content;この記事のスニペットでは、「要素のHTMLに挿入する場合」として .innerHTML プロパティを使用しています。
テキストエリアに文字を挿入するサンプル
早速サンプルです。以下にテキストエリアがありますが、その下にあるボタンを押すことでテキストが挿入されます。
テキストの挿入は1回きりなので、ご注意ください。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
はじめに、設置したい場所へHTMLを記述します。
<textarea id="textAreaField"></textarea>
<button id="sampleTextIns">テキストを挿入</button>コード量も非常に少ないので、これだけでHTMLの記述は完了です。
次に、JavaScriptのコードを記述します。
document.getElementById('sampleTextIns').addEventListener('click', () => {
// 対象を選択
let textAreaField = document.getElementById('textAreaField');
var mystring =
"ダミーテキスト"+
"ダミーテキスト"+
"ダミーテキスト\n\n"+
"ダミーテキスト"+
"ダミーテキスト\n"+
"・ダミーテキスト\n"+
"・ダミーテキストダミーテキスト\n"+
"・ダミーテキストダミーテキスト\n\n"+
"ダミーテキスト\n"+
"ダミーテキストダミーテキストダミーテキスト"+
"ダミーテキストダミーテキストダミーテキストダミーテキスト";
textAreaField.innerHTML = mystring;
},
// イベントは一回だけ
{ once: true } );コードを記述する場所は<head>〜</head> の中か、<body>〜</body> のどちらでも大丈夫ですが、クリック型のコードで要素を配置させた方がベターなので、<body>〜</body> の閉じ（クロージング）タグ前に記述するようにしましょう。
これで完了です。
ざっくりとしたコードの解説
コードはHTML・JavaScriptの2種類です。順に解説していきます。
HTML
HTMLのtextarea と、button タグの2個だけです。
<textarea id="textAreaField"></textarea>
<button id="sampleTextIns">テキストを挿入</button>後述のJavaScriptのid名（一部記述を変えれば、class名などでも可）と名称が一致すれば、textarea は別途設置する必要はありませんが、こんなシンプルな記述です。
JavaScript
JavaScriptは、ざっくり言うと「ボタンクリックで発動し、指定した文字列をテキストエリアに挿入」する記述になっています。
document.getElementById('sampleTextIns').addEventListener('click', () => {
// 対象を選択
let textAreaField = document.getElementById('textAreaField');
var mystring =
"ダミーテキスト"+
"ダミーテキスト"+
"ダミーテキスト\n\n"+
"ダミーテキスト"+
"ダミーテキスト\n"+
"・ダミーテキスト\n"+
"・ダミーテキストダミーテキスト\n"+
"・ダミーテキストダミーテキスト\n\n"+
"ダミーテキスト\n"+
"ダミーテキストダミーテキストダミーテキスト"+
"ダミーテキストダミーテキストダミーテキストダミーテキスト";
textAreaField.innerHTML = mystring;
},
// イベントは一回だけ
{ once: true } );挿入するテキストは、見やすいよう「+」演算子を使って文字列を繋いでいく方法で記述しています。
この場合に改行入れる場合は、入れたい位置にバックスラッシュの \n を入れることで改行ができます。
そして、.addEventListenerは「click（クリックでイベント発動）」にしています。その発動を1回だけに限定できるよう、最後の一文に once: true を記述しています。
once: true を記述しないと何回も挿入できてしまうので、忘れず記述するようにしましょう。
さいごに
フォームに設置したテキストエリアへ、任意の書式で入力してもらいたい場合に使えるスニペットの解説でした。
挿入するテキストは好みのものにもできるので、是非参考にしてみてください。
