この記事を読めば、HTML textareaを使いこなすことができるようになります。
はじめに
初心者でも簡単にHTML textareaを使いこなせるように、基本的な使い方から応用例まで10のサンプルコードを紹介します。
これを読めば、テキストエリアの作成やカスタマイズが簡単にできるようになります。
●HTML textareaとは
○textareaの基本
HTML textareaは、Webページ上でユーザーが複数行のテキストを入力できるようにするフォーム要素です。
textareaタグを使用して、テキストエリアを作成できます。
●textareaの使い方
○サンプルコード1：基本的なtextarea
<textarea></textarea>○サンプルコード2：制限付きtextarea
<textarea rows="5" cols="30" maxlength="100"></textarea>○サンプルコード3：複数行対応
<textarea rows="10" cols="30" wrap="soft"></textarea>●textareaの応用例
○サンプルコード4：自動リサイズ
<textarea oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px';" style="overflow:hidden;"></textarea>○サンプルコード5：入力文字数カウント
<textarea id="inputText" oninput="countCharacters();"></textarea>
<div id="counter">0文字</div>
<script>
function countCharacters() {
var inputText = document.getElementById("inputText");
var counter = document.getElementById("counter");
counter.innerHTML = inputText.value.length + "文字";
}
</script>○サンプルコード6：入力文字制限
<textarea maxlength="100"></textarea>○サンプルコード7：入力内容のリアルタイム表示
<textarea id="inputText" oninput="showInput();"></textarea>
<div id="display"></div>
<script>
function showInput() {
var inputText = document.getElementById("inputText");
var display = document.getElementById("display");
display.innerHTML = inputText.value;
}
</script>○サンプルコード8：リッチテキストエディタ
外部ライブラリ（例：TinyMCEやQuill）を利用して、リッチテキストエディタを実装することができます。
○サンプルコード9：投稿プレビュー機能
<textarea id="inputText" oninput="showPreview();"></textarea>
<button onclick="showPreview();">プレビュー</button>
<div id="preview"></div>
<script>
function showPreview() {
var inputText = document.getElementById("inputText");
var preview = document.getElementById("preview");
preview.innerHTML = inputText.value;
}
</script>○サンプルコード10：複数のtextareaを連動させる
<textarea id="inputText1" oninput="syncInputs();"></textarea>
<textarea id="inputText2" oninput="syncInputs();"></textarea>
<script>
function syncInputs() {
var inputText1 = document.getElementById("inputText1");
var inputText2 = document.getElementById("inputText2");
inputText2.value = inputText1.value;
}
</script>●注意点と対処法
- ブラウザによって表示が異なる場合があるため、CSSでスタイルを統一しておくことが望ましいです。
- ユーザーが入力したデータをそのまま表示する際は、スクリプトやHTMLタグが実行されないよう、エスケープ処理を行ってください。
●カスタマイズ方法
CSSを利用して、textareaの見た目をカスタマイズできます。
例えば、次のようなスタイルが考えられます。
textarea {
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}まとめ
この記事では、HTML textareaの基本的な使い方から応用例まで、10のサンプルコードを紹介しました。
これらのコードを参考にして、初心者でも簡単にテキストエリアの作成やカスタマイズができるようになるでしょう。
また、注意点と対処法にも気をつけて、安全にテキストエリアを利用しましょう。
今回学んだことを活かして、自分だけのオリジナルなテキストエリアを作成してみてください。
