Javascriptで文字数をカウント、色変更、メッセージウィンドウ表示
クライアント様から
お問い合わせフォームのテキストエリアの入力文字を
規定以上入力させたいと言うご要望がありましたので
ノンプログラマーらしい解決方法で実装してみました。
まずは条件
・テキストエリアに入力した文字数をカウント
・スペースや改行はカウントしない
・カウンターを表示
・カウンター100文字以下は赤で100文字以上になると青に変更
・100文字以下で他へ移動しようとするとメッセージウィンドウが開いて警告
この条件を元にJavascriptで組んでいくのですがノンプログラマーなので
いろいろなスクリプトを検索
参考サイト様（ありがとうございます！）
http://www33.atpages.jp/kazujava/javascript/javascript-textarea1.shtml
http://design-spice.com/2010/04/01/javascript-form-text-check/
上記スクリプトを参考に編集して
クライアント様のご希望に沿った形に書き換えました。
文字数のカウントとメッセージウィンドウの表示
<script language="JavaScript"><script language="JavaScript"><!-- var txt_limit = 100;//最小文字数window.onload = function() { document.getElementById("テキストエリアのID").onblur = function set_limit(that){ var check_element = document.getElementById("テキストエリアのID"); var check_limit = check_element.value.replace(/\s+/g,'').length; if(check_limit < txt_limit){ alert('感想文は'+txt_limit+'字以上入力でお願いします。'); check_element.focus(); } }}// --></script>
カウンターの色を変えるコード
<script type="text/javascript">
$(function(){
$('#kanso').bind('keyup',function(){
var thisValueLength = $(this).val().replace(/\s+/g,'').length;
$('.count').html(thisValueLength);
if(thisValueLength<100){ //文字数が100以下なら赤
document.getElementById('カウンターのID').innerHTML=
"<span style='font-weight: bold;color:red;'>"+thisValueLength+"</span>";}
else{
document.getElementById('カウンターのID').innerHTML=//100以上なら青
"<span style='font-weight: bold;color:blue ;'>"+thisValueLength+"</span>";}
});
});
</script>document.getElementByIdの（）の中はCSSのID これを指定した場所のデフォルト値「0」が変わっていきます。 HTML部分はcontact form 7にてIDを追加したものが自動的に吐き出されたもの
<textarea name="textarea-45" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" id="テキストエリアのID" aria-required="true"></textarea>
送信ボタンを押したらメッセージを出す動き（contact form 7では不可）
<input type="button" value="送信" onclick="set_limit()" />
上記Javascriptの「document.getElementById(“テキストエリアのID”).onblur = 」を削除し
送信ボタンに「onClick=”set_limit()”」をつける。
WordPress+contact form 7だった事も有り
ここにたどり着くまでにかなり時間を使いました。
contact form 7は素晴らしいプラグインなのですが、独自の要素を組み込めない
ということで、ここをどうするか試行錯誤。
IDの指定のみで何とか解決することができました。
この貴重な経験を忘れないためメモ。
Follow me!
