В jQuery Макс характера с количество символов для ввода и textarea


У меня все работает нормально, я просто думаю, что его можно улучшить и уменьшить количество кода. Если кто-то может помочь, что бы быть гениальной.

// Max Length Input
$('input[maxlength]').each(function() {         
    var maxCharLength = $(this).attr("maxlength");  

    if(maxCharLength < 0 || maxCharLength > 5000){
    } else {
        var charLength = $(this).val().length;
        $(this).after("<span class='charCount clearBoth' id='charCount_"+$(this).attr("name").replace(".","_")+"'> " + charLength + " of " + maxCharLength + " characters used</span>");        
        $(this).keyup(function() {              
            var charLength = $(this).val().length;              
            $(this).next("span").html(charLength + ' of ' + maxCharLength + ' characters used');

            if(charLength == maxCharLength ) {
                $(this).next("span").html('<strong> Maximum of ' + maxCharLength + ' characters used.</strong>');
                $(this).next("span").addClass("red");
            } else { $(this).next("span").removeClass("red"); }
        });
    }
});

// Max Length textarea
$('textarea[maxlength]').each(function() {          
    var maxCharLength = $(this).attr("maxlength");  

    if(maxCharLength < 0 || maxCharLength > 5000){
    } else {
        var charLength = $(this).val().length;
        $(this).after("<span class='charCount clearBoth'> " + charLength + " of " + maxCharLength + " characters used</span>");

            $('textarea[maxlength]').keyup(function(){

                var limit = parseInt($(this).attr('maxlength'));
                var text = $(this).val();
                var chars = text.length;

                $(this).next("span").html(chars + ' of ' + limit + ' characters used');

                if(chars > limit){
                    var new_text = text.substr(0, limit);
                    $(this).val(new_text);

                    $(this).next("span").html('<strong> Maximum of ' + limit + ' characters used.</strong>');
                    $(this).next("span").addClass("red");
                } else { $(this).find("span").removeClass("red"); }
            });
    }
});


1847
2
задан 11 августа 2011 в 02:08 Источник Поделиться
Комментарии
1 ответ

Есть несколько вещей, которые я хотел бы предложить:
1. Заменит вам чисел с константами и вернуться в состояние, чтобы избавиться от 'другой':

var minTextLength = 0;
var maxTextLength = 5000;
if (maxCharLength >= minTextLength || maxCharLength <= maxTextLength){
//Your code...
}

2. Переместить блок кода:

$(this).next("span").html('<strong> Maximum of ' + maxCharLength + ' characters used.</strong>');
$(this).next("span").addClass("red");
} else { $(this).next("span").removeClass("red"); }

В отдельную функцию.

И есть пара вещей, которые меня смущают:
1. В Максимальная длина тега textarea' у вас есть:

$('textarea[maxlength]').keyup()

Это правильно? Потому что это означает, что вы будете добавлять много обработчиков на все ваши textarea в[параметр maxlength].

2
. В максимальный входной длины у вас:

if(charLength == maxCharLength )

Может быть, это может быть заменен:

if(charLength > maxCharLength )

В зависимости от ответов на эти вопросы, может быть, это будет возможно, чтобы переместить обработчик вверх в отдельную функцию. И, возможно, даже весь код из 'максимальная длина тега textarea' и 'Макс. длина'.

2
ответ дан 11 августа 2011 в 07:08 Источник Поделиться