Обратный отсчет персонажей, как на twitter

Ответ 1

Сделайте span и textarea и дайте им уникальные селектор (используя идентификатор или класс), например:

<textarea class="message" rows="2" cols="30"></textarea>
<span class="countdown"></span>

И затем выполните функцию обновления следующим образом:

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('.message').val().length;
    jQuery('.countdown').text(remaining + ' characters remaining.');
}

И запустите эту функцию при загрузке страницы и при каждом изменении сообщения:

jQuery(document).ready(function($) {
    updateCountdown();
    $('.message').change(updateCountdown);
    $('.message').keyup(updateCountdown);
});

Посетите пример и просмотрите источник. jQuery делает такие вещи очень просто.

Ответ 2

Я использовал Aaron Russell просто счетный плагин jQuery; хотя, если бы я написал это, я бы разработал его немного по-другому (автоматическое создание счетчика div, используя атрибут data-maxlength вместо опции плагина и т.д.).

Простое использование:

$('#my_textarea').simplyCountable();

Расширенное использование:

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});

Ответ 3

Это самоубийство для использования jQuery, Mootools или подобных для такой простой задачи... если вы уже не используете их для чего-то еще.

Простая функция javascript:

function limitTextCount(limitField_id, limitCount_id, limitNum)
{
    var limitField = document.getElementById(limitField_id);
    var limitCount = document.getElementById(limitCount_id);
    var fieldLEN = limitField.value.length;

    if (fieldLEN > limitNum)
    {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else
    {
        limitCount.innerHTML = (limitNum - fieldLEN) + ' charachter(s) to go.';
    }
}

Первый параметр - это идентификатор ввода /textarea. Второй - идентификатор div для отображения оставшихся символов. Третий - сам предел.

И простой HTML:

<input type="text" value="" name="title" id="title" maxlength="100" onkeyup="limitTextCount('title', 'divcount', 100);" onkeydown="limitTextCount('title', 'divcount', 100);">
<br>
<div id="divcount">100 charachter(s) to go..</div>

Ответ 4

Я добавил простую функцию плюрализации, cus никто не любит плохую грамматику.

function pluralize(count, word){
  if (count == 1 || count == -1){
    return String(count) + ' ' + word;
  }else{
    return String(count) + ' ' + word + 's';
  }
}

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('#micropost_content').val().length;
    jQuery('.countdown').text(pluralize(remaining,'character') + ' remaining');
}

...

Ответ 5

В итоге мы создали пользовательское решение JS, которое работает на любом входе с классом "ограничено". Он использует атрибут пользовательских данных HTML5 ( "data-maxlength" ) для указания длины. Конечно, это не так полно, как упоминал плагин Райан. Но нам нужны были несколько динамически добавленных счетчиков, которые, похоже, не поддерживались плагином. Надеюсь, что это поможет.

function addCharacterCount(input) {
  var $input    = $(input),                                                                     
      maxLength = $input.data('maxlength'),
      remaining = maxLength - $input.val().length;                                              
  $('<label><input type="text" id="' + input.id + '-counter" size="3" value="' + remaining + '" /> Characters remaining (max ' + maxLength + ')</label>').insertAfter(input);
}

$('form .limited').each(function () {                                                           
  addCharacterCount(this);                                                                      
}); 

$('form .limited').live('keyup', function() {                                                   
  var $element = $(this),
      maxLength = $element.data('maxlength');
  $("#" + this.id + "-counter").val(maxLength - $element.val().length);
});

Ответ 6

Я обновил версию @Brian McKenna для нескольких текстовых полей/текстовых полей с атрибутом maxlegth.

Демо здесь

<textarea class="message" rows="2" cols="30" maxlength="60"></textarea>
<span class="countdown"></span>

<textarea class="message" rows="2" cols="30"  maxlength="100"></textarea>
<span class="countdown"></span>

На странице load update all count.

jQuery(document).ready(function($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

});

Сделайте две функции для подсчета обновлений.

function updateCountdownAll() {
        $('.message').each(function () {
            updateCountdown(this);
        });
    }

    function updateCountdown(e) {

        var currentElement;
        if (e.target) {
            currentElement = e.target;
        }
        else {
            currentElement = e;
        }

        var maxLengh = $(currentElement).attr('maxlength');
        var remaining = maxLengh - $(currentElement).val().length;
        $(currentElement).nextAll('.countdown:first').text(remaining + ' character(s) remaining.');
    }

Ответ 7

использовать jquery

сохранить это как jquery.textlimiter.js

(function($) {
    $.fn.extend( {
        limiter: function(limit, elem) {
            $(this).on("keyup focus", function() {
                setCount(this, elem);
            });
            function setCount(src, elem) {
                var chars = src.value.length;
                if (chars > limit) {
                    src.value = src.value.substr(0, limit);
                    chars = limit;
                }
                elem.html( limit - chars );
            }
            setCount($(this)[0], elem);
        }
    });
})(jQuery);

использование

<textarea id="text" maxlength="100" cols="50" rows="5" placeholder="Enter Text"></textarea>
    <div id="chars">100</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="path/to/jquery.textlimiter.js"></script>
<script>
$(document).ready( function() {
    var elem = $("#chars");
    $("#text").limiter(100, elem);
});
</script>

Ответ 8

HTML:

<form>
    <!-- remember to markup your forms properly using labels! -->
    <label for="textareaChars">No more than 100 characters</label>

    <textarea id="textareaChars" maxlength="100"></textarea>

    <p><span id="chars">100</span> characters remaining</p>

</form>

JS:

$( document ).ready(function() {
    var maxLength = 100;
    $('textarea').keyup(function() {
        var length = $(this).val().length;
        var length = maxLength-length;
        $('#chars').text(length);
    });
});

Ответ 9

В моей реализации я добавил следующую функцию JS:

function charactersRemaining(elementID, messageElementID, maxCharacters)
{
    var remaining = maxCharacters - $('#' + elementID).val().length;
    $('#' + messageElementID).text(remaining + ' characters remaining.');
}

Затем я мог бы повторно использовать эту функцию по всему приложению (например, если бы у меня был следующий HTML-код):

<textarea class="form-control" asp-for="Comments" rows="3"></textarea>
<span id="commentsCharsRemaining" class="text-primary"></span>

Просто добавьте эти 2 оператора jquery, чтобы заставить его работать:

$('#Comments').change(function () {
    charactersRemaining('Comments', 'commentsCharsRemaining', 2000)
});
$('#Comments').keyup(function () {
    charactersRemaining('Comments', 'commentsCharsRemaining', 2000)
});