Подтвердить что ты не робот

Обратный отсчет доступных пространств в текстовом поле с jquery или другим?

У меня есть несколько областей на моем сайте, где мне нужно ограничить ввод текста на X количество символов, и приятно показать количество пробелов, оставшихся во время ввода пользователем, например твиттер.

Я нашел этот плагин jquery; jquery max-length plugin

Он делает только то, что мне нужно, но кажется, что это похоже на overkill, я не уверен, что размер файла, но он выглядит как много строк кода для такой простой задачи, вы думаете, мне было бы лучше использовать не -jquery метод? Причина, по которой я думал о jquery, - это путь, потому что jquery уже включен во все мои страницы ОБНОВЛЕНИЕ;

Я только что нашел этот метод без jquery, который делает то же самое, это способ уменьшить размер, так что это лучший метод?

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}
</script>

You have 
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.
4b9b3361

ОТВЕТЫ

Ответ 1

Очень просто в jQuery:

<textarea id="myTextarea"></textarea>
<p id="counter"></p>

<script type="text/javascript">
$('#myTextarea').keyup(function () {
    var left = 200 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('Characters left: ' + left);
});
</script>

Замените 200 на любой ваш предел.

Обратите внимание, что это не ограничивает фактический ввод текста, оно просто подсчитывается. Вам нужно проверить серверную сторону для входной длины, это всего лишь визуальный помощник.

В стороне, я не думаю, что вы даже должны пытаться ограничить входную длину, отрицая любой ввод, когда предел достигнут. Это боль в заднем удобстве использования и в любом случае нельзя полагаться. Простой обратный отсчет и проверка на стороне сервера - лучший вариант IMHO.

Ответ 2

Иногда вам нужно иметь более одной текстовой области и желать, чтобы они были рассмотрены отдельно, без необходимости кода для каждого. Этот код динамически добавляет символы, оставшиеся до любого атрибута maxLength...

<script type="text/javascript">
$(document).ready(function(){
    $('textarea[maxLength]').each(function(){
        var tId=$(this).attr("id");
        $(this).after('<br><span id="cnt'+tId+'"></span>');
        $(this).keyup(function () {
            var tId=$(this).attr("id");
            var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength
            var left = tMax - $(this).val().length;
            if (left < 0) left = 0;
            $('#cnt'+tId).text('Characters left: ' + left);
        }).keyup();
    });
});
</script>
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br>
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br>
<textarea id="textareaWithoutCounter"></textarea>

Ответ 3

Я использовал Aaron Russell просто счетный плагин jQuery с успехом

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

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

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

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

Ответ 4

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function()
        {
            $('#TestId').keyup(function(e)
            {
                var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength)
                {
                    $('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();
                }
                else
                {
                    $('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });
    </script>
</head>
<body>
    <textarea id="TestId" cols="20" rows="8"></textarea><br />
    (Maximum characters: 100)<br />
    <span id="charStatus"></span>   
</body>
</html>

Ответ 5

 var max = 140;
        $("#spn").html(max+"  Remaining");
        $("#textarea").keyup(function () {
            var lenght1 = $("#textarea").val().length;
            var remaining = max - lenght1;
            $("#spn").html(remaining + "  Remaining");
            if (remaining < 0) { $("#spn").css('opacity', '0.4').css('color', 'red'); $("#comment").attr('disabled', 'disabled'); } else { $("#spn").css('opacity', '1').css('color', 'black'); $("#comment").removeAttr('disabled'); }
            if (remaining < 10) { $("#spn").css('color', 'red'); } else { $("#spn").css('color', 'black'); }

        });

Ответ 6

Я использовал jQuery и ответ путем deceze, а затем изменил его, чтобы дать мне обратный отсчет в стиле Twitter, чтобы пользователи могли видеть, насколько они прошли и соответственно отрегулируйте их текст. Я также поместил его в свою собственную функцию, чтобы я мог назвать это из другой функции, которая иногда заполняла текстовое поле автоматически:

    function reCalcToText() {
        var left = 200 - $('.toText').val().length;
        if (left < 0) {
            $('#counter').text(left);
            $('#counter').addClass("excess");
        } else {
            $('#counter').text(left);
            $('#counter').removeClass();
        }
    }
    function onReady() {
                  $('#<%= toText.ClientID %>').keyup(function() {
            reCalcToText();
        });
    };

Ответ 7

Итак, я взял версию @deceze и добавил немного трюка, чтобы сделать это:

  • показывать всегда, а не только когда пользователь начинает печатать,
  • показать минус, когда предел закончился, и

  • добавить класс - цвет текста - когда он превышает лимит (для этого, конечно, необходим дополнительный css)

    $(document).ready(function(){
    var left = 200
    $('#field_counter').text('Characters left: ' + left);

        $('#id_description').keyup(function () {

        left = 200 - $(this).val().length;

        if(left < 0){
            $('#field_counter').addClass("overlimit");
        }
        if(left >= 0){
            $('#field_counter span').removeClass("overlimit");
        }

        $('#field_counter').text('Characters left: ' + left);
    });
});

Для тех, кто нуждается в том же, что и я:)

Ответ 8

Используя jQuery, предположим, что у вас есть текстовое поле с полем id, которое вы хотите ограничить до 100 символов, и еще один элемент с символами id, оставшийся, чтобы отобразить количество доступных символов:

var max = 100;
$('#field').keyup(function() {
    if($(this).val().length > max) {
        $(this).val($(this).val().substr(0, max));
    }
    $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining');
});

Ответ 9

Имейте в виду, что вам необходимо учитывать, что NewLines составляет 2 символа.
Я построил на решениях, приведенных ниже, на следующий код, который учитывает новые строки.

function DisplayCharactersLeft(idOfInputControl) {
    var maxNumberOfCharacters = $("#" + idOfInputControl).attr("maxLength");

    $("#" + idOfInputControl).on("input", function () {
        var currentText = $(this).val();
        var numberOfNewLines = GetNumberOfNewLines(currentText);

        var left = maxNumberOfCharacters - (currentText.length + numberOfNewLines);
        if (left < 0) { left = 0; }
        $("#" + idOfInputControl + "CharactersLeftCounter").text("Characters left: " + left);
    });

}    

function GetNumberOfNewLines(text) {

    var newLines = text.match(/(\r\n|\n|\r)/g);
    var numberOfNewLines = 0;
    if (newLines != null) {
        numberOfNewLines = newLines.length;
    }
    return numberOfNewLines;
}