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/

上記スクリプトを参考に編集して
クライアント様のご希望に沿った形に書き換えました。

文字数のカウントとメッセージウィンドウの表示

カウンターの色を変えるコード

document.getElementByIdの()の中はCSSのID
これを指定した場所のデフォルト値「0」が変わっていきます。

HTML部分はcontact form 7にてIDを追加したものが自動的に吐き出されたもの

送信ボタンを押したらメッセージを出す動き(contact form 7では不可)

上記Javascriptの「document.getElementById(“テキストエリアのID”).onblur = 」を削除し
送信ボタンに「onClick=”set_limit()”」をつける。

WordPress+contact form 7だった事も有り
ここにたどり着くまでにかなり時間を使いました。

contact form 7は素晴らしいプラグインなのですが、独自の要素を組み込めない
ということで、ここをどうするか試行錯誤。
IDの指定のみで何とか解決することができました。

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


Posted in wordpress, サイト制作, ポートフォリオ, 仕事 and tagged , , , .

コメントを残す