Обратный отсчет персонажа как в твиттере

Question

Как мне сделать обратный отсчет "оставшихся символов", как в Twitter с jQuery? А также ограничьте ввод текстовой областью.

Answer 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 делает такие вещи очень простыми.

Answer 2

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

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

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

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

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

Answer 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.';
    }
}

Первый параметр - это идентификатор ввода / текстовой области. Второе - идентификатор 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>

Answer 4

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

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');
}

...

Answer 5

В итоге мы создали нестандартное решение JS, которое работает с любым входом класса «limited». Он использует пользовательский атрибут данных 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);
});

Answer 6

В моей реализации я добавил следующую функцию 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)
});

Answer 7

I Обновлена ​​версия @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>

При загрузке страницы обновляется весь счет.

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.');
    }

Answer 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);
    });
});

Answer 9

используйте 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>