0

まとめたテキストボックス/テキストエリアカウンターのコードを含めました。（私の投稿で混乱しないことを願っています...）

スクリプトは非常にうまく機能しますが、jquery と javascript の経験が浅いため、コードが途方もなく肥大化していることはわかっています。

反復コード (//イベント 1 から 5) を独自の関数に入れ、各イベントでその関数を呼び出す方法を誰かが教えてくれることを期待していました。

ありがとう、

ジェフ

$(document).ready(function() {


if ($('span[class=tbc] input[type=text], span[class=tbc] textarea')) {        
    $('span[class=tbc] input[type=text], span[class=tbc] textarea').each(function() {

       var maxL = $(this).attr('MaxLength');

        $(this).siblings('span[class=tbc]').prepend('<br /><span id="spanID1">Characters remaining: </span>'); 
        $(this).siblings('span[class=tbc]').append('<strong>' + maxL + '</strong>');


            //event one
            $(this).keyup(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end keyup function  


            //event two
            $(this).keydown(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end keydown function  


            //event three
            $(this).mouseout(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end mouseout function 


            //event four
            $(this).mousemove(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end mousemove function 


            //event five
            $(this).blur(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end blur function 


    });  //end each loop
} //end if ($('span[class=tbc] input[type=text] 

}); //end ready
4

4 に答える 4

0 
$(document).ready(function() {
    $('span.tbc').find('input[type=text], span.tbc textarea').each(function() {
        var ele = $(this);
        var maxL = ele.attr('MaxLength');
        var siblings = ele.siblings('span.tbc');
        siblings
            .prepend('<br /><span id="spanID1">Characters remaining: </span>')
            .append('<strong>' + maxL + '</strong>');
        //event one-five
        ele.bind("keyup keydown mouseout blur mousemove", function() {
            var cnt = ele.val().length;
            var chars = maxL-cnt;
            var mesg = ele.parent('span').attr('ID');
            if (cnt > maxL - 1) {
                //alert('Cannot enter anymore characters.');
                siblings.html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>');
            } else {
                siblings.html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');
            }
        }); //end event function
    });  //end each loop
});
于 2009-12-21T17:54:53.460 に答える