cssとjQueryで値の変更・取得してカスタマイズや、placeholder内で改行するなどtextareaタグを使いこなす
もくじ
- textareaタグとは?
- input type=”text”との違い
- textareaタグの使い方と属性
- textareaタグに初期値を設定する
- textareaタグにplaceholderを設定する
- textareaタグのplaceholder内で改行する
- placeholderをフローティングラベルにする
- textareaタグの入力を必須にする
- textareaタグを読み取り専用にする
- cssでtextareaタグのデザインをカスタマイズする
- cssの:hover・:focusでデザインを変更する
- cssの:hover・:focus時にplaceholderのデザインを変更する
- textareaタグに入力された値をjQueryで取得する
- jQueryでtextareaタグに入力された値が空か判別する
- inputの入力値を、jQueryでtextareaの末尾に改行して追記する
- jQueryでtextareaに入力されている文字数をカウントする
- jQueryでtextareaにコピペされた文字数でもカウントする
- jQueryでtextareaタグに入力された値を置換する
- jQueryでtextareaタグに入力されたhtml特殊文字を置換する
HTML5関連記事
jQuery UIのsortableを使ってリストをドラッグで並び替える
【HTML】アップルタッチアイコン(apple-touch-icon)とsvg形式のファビコン(favicon)を作成・設定する
HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでチェックボックスの親子を連動させる + 選択されているかのバリデーション
Android・iOS別にブラウザからスマホアプリの受信トレイを起動する方法
cssとjQueryで値の変更・取得や、placeholderの改行などtextareaタグを使いこなす
placeholderを見やすく!jQuery+css3でつくるフローティングラベル
textareaタグとは?
「textareaタグ」は、フォーム内で長文を入力するために使われるHTML要素です。
<textarea>タグは、複数行のテキスト入力欄を作成する際に使用します。
input type=”text”との違い
input type=”text”は、短い文章を入力するもので、入力テキストの改行はできません。
textareaタグは、長文を入力するもので、改行が可能です。
textareaタグの使い方と属性
name属性
textareaタグについている、name属性
はデータを送るときに利用されるデータの名前で使用するので、データ送信の必要がある場合は必須です。
id属性
textareaタグについている、id属性
はjQueryで選択値の取得や変更で使用していきます。
class属性
textareaタグについている、class属性
はcssでデザインの変更で使用していきます。
textareaタグに初期値を設定する
HTML
<textarea id="area" name="area">入力初期値</textarea>
<textarea>入力初期値</textarea>
のように、タグの間に入力初期値を入れます。
初期値を、空にしたい場合は何も入力しません。
textareaタグにplaceholderを設定する
HTML
<textarea id="area" name="area" placeholder="入力のヒント">入力初期値</textarea>
placeholder
属性にテキストを入力することで、入力欄が空の状態の場合、入力内容のヒントを表示できます。
入力欄が、入力されたタイミングで消えます。
textareaタグのplaceholder内で改行する
HTML
<textarea id="area" name="area" placeholder="入力のヒント 改行する"></textarea>
placeholder
属性の中で、改行がしたい場合は、改行したい箇所で
を入力することで、改行できます。
ただし、Macのsafariでは改行されないそうです。
placeholderをフローティングラベルにする
placeholderは入力してしまうと消えるので、何入力すればいいか途中で忘れたりします。
入力しても消えないフローティングラベルにする場合は、下記を参考にしてください。
textareaタグの入力を必須にする
HTML
<textarea id="area" name="area" required></textarea>
required
属性を設定することで、入力がない場合はエラーが出ます。
textareaタグを読み取り専用にする
HTML
<textarea id="area" name="area" readonly>読み取り専用のため、編集できません。</textarea>
readonly
属性を設定することで、読み取り専用にし、編集できなくなります。
cssでtextareaタグのデザインをカスタマイズする
cssでtextareaタグのデザインを簡単に変更していきます。
下記のcssで基本的なカスタマイズをしていきます。
css
textarea{ width: 90%; height: 100px; padding: 10px; margin: 1.5rem auto; display: block; border-radius: 5px; border: 2px solid #777; outline:none; line-height: 20px; }
cssの:hover・:focusでデザインを変更する
cssの疑似要素の、:hoverと、:focusでtextareaタグのデザインを変更してみます。上記cssに追記したものが下記です。
See the Pen NWdqpOr by むぅ (@mugenweb)
on CodePen.light
css
textarea:hover { border-color:#f6b73c; background-color: #fdefd4; color:#f6b73c; } textarea:focus { border-color: #3d7e9a; background-color: #cfeffd; color:#3d7e9a; }
cssの:hover・:focus時にplaceholderのデザインを変更する
cssの疑似要素の、:hoverと、:focusでplaceholderのデザインを変更してみます。上記cssに追記したものが下記です。
See the Pen OJWVpGM by むぅ (@mugenweb)
on CodePen.light
css
textarea:hover::placeholder { font-weight: bold; text-decoration: underline; color:#f6b73c; } textarea:focus::placeholder { font-weight: bold; text-decoration: underline; color:#3d7e9a; }
textareaタグに入力された値をjQueryで取得する
確認ボタンが押された時に、textareaタグに入力された値をjQueryで取得してみます。
取得した値がわかりやすいように、結果をHTMLに出力します。
See the Pen MWJwoZa by むぅ (@mugenweb)
on CodePen.light
HTML
<textarea id="area" name="area" class="area"></textarea> <textarea id="result"></textarea> <button id="check" type="button">確認</button>
JavaScript
$('#check').click(function() { var result = $('#area').val(); $('#result').val(result); });
上記の例では、確認ボタンが押されたときに、textareaタグのval()値を取得するという処理が行われています。
textareaタグは、form関連のタグなので、jQueryで値を取得したい場合は、text()ではなく、val()を使用します。
最後に、取得した値を#resultに反映しています。
jQueryでtextareaタグに入力された値が空か判別する
確認ボタンが押された時に、jQueryでtextareaタグに入力された値が空かを判別して、わかりやすいように、結果をHTMLに出力します。
See the Pen KKadvRz by むぅ (@mugenweb)
on CodePen.light
HTML
<textarea id="area" name="area" class="area"></textarea> <textarea id="result"></textarea> <button id="check" type="button">確認</button>
JavaScript
$('#check').click(function() { var result = $('#area').val(); if(result !== ''){ $('#result').val(result); }else{ $('#result').val('値は空でした。'); } });
上記の例では、確認ボタンが押されたときに、textareaタグのval()値を取得し、値を確認して出力を変更しています。
最後に、結果を#resultに反映しています。
inputの入力値を、jQueryでtextareaの末尾に改行して追記する
追記ボタンが押された時に、jQueryでinputに入力された値を、textareaの末尾に改行してから追記し、結果をHTMLに出力します。
See the Pen RwKWLgN by むぅ (@mugenweb)
on CodePen.light
HTML
<div class="flex"> <input type="text" name="" id=""> <button id="check" type="button">確認</button> </div> <textarea id="result"></textarea>
JavaScript
$('#check').click(function() { var input = $('#input').val(); var result = $('#result').val(); if(input !== ''){ var br = ''; if(result !== ''){ br = '\n'; } $('#result').val(result + br + input); } });
上記の例では、確認ボタンが押されたときに、まずinputの値を取得し、入力がない場合は何もしません。
inputに入力があった場合は、textareaのval()を確認し、空なら改行を入れずに、入力されているなら、改行を入れて結果を反映します。
jQueryでtextareaに入力されている文字数をカウントする
jQueryで、textareaに入力された時に、入力されている文字数をカウントし、結果をHTMLに出力します。
See the Pen vYgNWPp by むぅ (@mugenweb)
on CodePen.light
HTML
<textarea id="result"></textarea> <p><span id="count">0</span>文字入力されています。</p>
JavaScript
$('#result').keyup(function() { var result = $(this).val().length; $('#count').text(result); });
上記の例では、textareaに入力された時に、val().length
で入力されている値の文字数をカウントし、結果をHTMLに出力します。
jQueryでtextareaにコピペされた文字数でもカウントする
上の例では、コピペされた時には、文字数をカウントしないので、コピペされた場合でも文字数をカウントし、結果をHTMLに出力します。
See the Pen MWJareK by むぅ (@mugenweb)
on CodePen.light
HTML
<textarea id="result"></textarea> <p><span id="count">0</span>文字入力されています。</p>
JavaScript
$('#result').bind('keyup',function(){ result = $(this).val().length; $('#count').html(result); }); $('#result').blur(function(){ result = $(this).val().length; $('#count').html(result); });
bind('keyup'~
が文字数を入力時に文字数カウントする関数です。
blur(~
の関数で、コピペされた場合カウントできないのを、textareaからフォーカスが外れたタイミングで、再計算します。
タイムラグは出てしまいますが、あったほうが便利ですね。
jQueryでtextareaタグに入力された値を置換する
確認ボタンが押された時に、jQueryでtextareaタグに入力された改行を<br>タグに置換して、わかりやすいように、結果をHTMLに出力します。
See the Pen ExZVELV by むぅ (@mugenweb)
on CodePen.light
HTML
<textarea id="area" name="area" class="area"></textarea> <textarea id="result"></textarea> <button id="check" type="button">確認</button>
JavaScript
$('#check').click(function() { var result = $('#area').val(); if(result !== ''){ var replace = result.replace(/\n/g, "<br>"); $('#result').val(replace); } });
上記の例では、確認ボタンが押されたときに、textareaタグのval()値を取得し、値の中から改行があれば<br>タグに置換した結果を#resultに反映しています。
jQueryでtextareaタグに入力されたhtml特殊文字を置換する
jQueryでtextareaタグに入力されたhtml特殊文字をエスケープ、もしくはアンエスケープする場合は、下記の記事を参考にしてください。
コメント