Функция JQuery - PullRequest
Новая
       20

Функция JQuery

0 голосов
/ 22 февраля 2011

Я использую приведенный ниже код для установки количества символов в текстовой области.Это решение работает нормально, так как я передаю идентификатор textarea.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var charactersAllowed = 255; // this is picked from widget configuration
        $("#charCount").html(charactersAllowed);
        $("#message").keyup(function() {
            $("#charCount").html(charactersAllowed - ($(this).val().length));
            if($(this).val().length > charactersAllowed) {
                this.value = this.value.substring(0, charactersAllowed);
                $("#charCount").html(charactersAllowed - ($(this).val().length));
            }
        });
    });
</script>
</head>
<body>
    <textarea name="message" id="message" tabindex="4" rows="4" cols="35"></textarea>
    <p class="character_limit">Character limit: <span id="charCount"></span></p>
</body>
</html>

мне нужно обернуть эту функцию в функцию, чтобы я мог вызывать эту функцию на любом элементе ввода.Могу ли я обернуть один и тот же код внутри имени функции и вызвать ту же функцию в событии onta () Textarea?

Пожалуйста, предоставьте мне входные данные и помощь для перекодирования этого фрагмента.

Спасибо Локеш Ядав

Ответы [ 3 ]

1 голос
/ 22 февраля 2011

Вы можете применить то, что у вас есть, к любой текстовой области: 

$(document).ready(function() {
    limitTextBox("#message", "#charCount", 255);
});

function limitTextBox(box, charsDisplay, charactersAllowed) {
    var $box = $(box),
        $charsDisplay = $(charsDisplay);
    $charsDisplay.html(charactersAllowed - ($box.val().length));
    $box.keyup(function() {
        $charsDisplay.html(charactersAllowed - ($box.val().length));
        if($box.val().length > charactersAllowed) {
            $box[0].value = $box[0].value.substring(0, charactersAllowed);
            $charsDisplay.html(charactersAllowed - ($box.val().length));
        }
    });

}

Живой пример

... но я настоятельно рекомендую вам не делай этого .Вместо этого посмотрите, как StackOverflow ограничивает ввод в текстовые поля (например, комментарии).Они позволяют вам печатать все, что вы хотите, но только на самом деле позволяют сохранить комментарий, если вы находитесь в пределах досягаемости.Такое усечение контента по типу пользователя приводит к ужасному восприятию пользователя.

Не по теме : иногда в вашей исходной функции вы использовали val() в jQueryНапример, в другой раз вы использовали value для необработанного элемента DOM.Я сохранил это выше, но вы, вероятно, хотите выбрать один или другой и использовать его повсюду.

1 голос
/ 22 февраля 2011

Вы можете создать плагин так: 

(function($) {
   $.fn.charlimit = function(options) {
       var def = {limit: 250, display: null};
       $.extend(def, options);
       var $display = $(def.display);

       $display.html(def.limit);

       this.bind('change keyup', function() {
            var l = $(this).val().length;
            $display.html(def.limit - l);
            if(l > def.limit) {
                $(this).val(function(i, value) {
                     return value.substring(0, def.limit);
                });
                $display.html(def.limit - $(this).val().length);
            }
       });
       return this; 
   };   
}(jQuery));

И используйте его с: 

$('#message').charlimit({limit: 250, display: '#charCount'});

DEMO

0 голосов
/ 22 февраля 2011

Просто используйте класс (в моем примере «myclass») в текстовых областях, которые вы хотите проверить, и измените это: 

$("#message").keyup(function() { ...

В это: 

$("textarea.myclass").keyup(function() { ...

и 

$("#charCount")

К 

$(this).find('span.charCount')

Конечно, вы должны отредактировать свой HTML-код и изменить идентификатор диапазона на класс (thx @ T.J. Crowder за его указание!)

...