[jQuery]で字数入力 カウントを試した

最近jQueryにはまってしまったので（楽しい意味で）、フォームなどでの字数をチェックするときのサンプルデータを作ってみました。

htmlが汚いのは恒例です。

フォームの字数チェックといっても簡単なもので、テキストエリアなどに入力された字数が一定字数をオーバーしたら送信ボタンを押せなくし、エラー文字を表示させるというものです。

もう既に、プラグインでいろいろ出てますが、jQueryの基本（$とかですね）を使おう！ということで作ってみました。

まずは動作サンプルをば。

制限字数を初期設定で設定します。

htmlの表現にもｇｄｇｄ感がありますが、「入力数」は「入力内容」です。

「字数」は「制限字数」から「入力内容の字数」を引いたものが表示されます。

ではソースを以下に。

 
<pre>$(function(){
var lengthCountConf = {
maxLength: 10,              // 入力最大文字数
errorMsgCol: "#FF3399"       // エラー文字の色
} ;
 

$("#count").text( lengthCountConf["maxLength"] ) ;
$("form").append('

'+ lengthCountConf["maxLength"] +'字を超えました！

') ;
$(".lengthErr").css({ display: "none", color: lengthCountConf["errorMsgCol"] }) ;

$("#comment").bind("keyup submit blur",
function()
{
if( $(this).val().length &gt; lengthCountConf["maxLength"] ) {
$(".lengthErr").fadeIn({ speed: "fast" }) ;
$("#submit").attr( "disabled" ,"disabled" ) ;
} else {
if( $(".lengthErr").css("opacity") == 1 ) {
$(".lengthErr").fadeOut( { speed: "slow" } ) ;
}
$("#submit").attr( "disabled" ,"" ) ;
}
$("#count").text( lengthCountConf["maxLength"] - $(this).val().length ) ;
}
) ;
}) ;
</pre>
&nbsp;

いろいろあります。

まずjQueryでは定番の[ $(function(){}); ]は「ドキュメント（html）の読み込みが完了するまで待て！お座り！」という意味らしいです。

ちなみに[ $(document).ready(function(){}) ; ]と同じ効果があるそうです。（エイリアスとかなんとか）

$(“#id”)と書くと、それ自体がオブジェクト（javascriptの用語がようわからんのでPHPっぽい言い方してみます）となります。

（PHPでいうと、$obj =& new Object ;みたいな感じですかね？）

で、[ $(“#id”) ]で取得したオブジェクトの中にはたくさんの関数が詰め込まれています。

例えば、取得したオブジェクトが「input」タグだとします。

そのinputタグのvalue値を取得したい場合は、[ $(“#id”).val() ; ]とすることで、value値が取れます。

動作サンプルのhtmlではtdに対して使っていますのでこの場合は[ $(“#id”).text() ; ]とすることで、数値が取れたり、代入することが出来ます。

代入する場合は[ $(“#id”).text(“代入する値”) ; ]とすると代入できます。

そんでこれらをたくさん組み合わせて、出来たのがさっきの動作サンプルです。

jQueryには宣言するだけで使えるようになっているものがたくさんあります。

それらを使って見た目をゴージャスなふいんき（←なぜか変換できない）を楽しんでください。

オレめちゃくちゃ乗り遅れてる感じがします

これからもチョコチョコとjQueryネタ書いていこうとおもいまする。

jQuery最高です。