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の指定のみで何とか解決することができました。

この貴重な経験を忘れないためメモ。


Menu Title