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

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

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

Он делает только то, что мне нужно, но это, кажется, вроде как перебор, я не уверен, что размер файла, но это выглядит как много строк кода для такой простой задачи, как вы думаете, я бы лучше используя метод не jquery? Причина, по которой я думал о jquery, - это путь, потому что jquery уже включен во все мои страницы. UPDATE;

Я только что нашел этот метод не 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.

источник

2009-08-09 JasonDavis

http://stackoverflow.com/questions/2136647/character-countdown-like-on-twitter –

@ConnorLeech Это 5 лет – JasonDavis

Я хотел бы предложить этот плагин, активно поддерживаетс: HTTP: // mimo84 .github.io/bootstrap-maxlength/Отказ от ответственности: я являюсь автором –

Очень простой в 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 по whateve r ваш предел.

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

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

источник

2009-08-09 06:09:43 deceze

+1 для простоты –

+12

Для всех, кто это реализует, я бы рекомендовал использовать 'bind (" propertychange input textInput ")' over 'keyup'. Эти события будут определять все формы ввода, а не только с клавиатуры. –

Или вместо '.bind()', как и для jQuery 1.7, метод '.on()' предоставляет все функции, необходимые для прикрепления обработчиков событий и является предпочтительным. '$ ('# myTextarea'). on (" propertychange input textInput ", funtion() {...});'. См. Принятый ответ [здесь] (http://stackoverflow.com/questions/8359085/delegate-vs-on) для получения дополнительной информации. – chrisjleu

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

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

источник

2009-08-09 06:09:33 bryan

<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>

источник

2009-08-09 10:17:18 Raghav

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

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

источник

2009-09-30 03:45:23 Falkayn

Не могли бы вы разместить jsfiddle.com, показывая его в действии? – JasonDavis

я использовал

Простого использования Аарона Рассел simply countable jQuery plugin с успехом:

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

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

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

источник

2010-01-26 00:11:58

спасибо за ответ, я смотрю на многие варианты, но этот плагин действительно огромный по размеру для такой простой задачи – JasonDavis

Я тоже использовал этот плагин - очень хорошо! Лично я не возражаю против размера файла, так как этот плагин предлагает такую прочную функциональность для подсчета и ограничения слов и символов. –

Иногда вам нужно иметь более одной текстовой области и вы хотите, чтобы они были адресованы отдельно, без необходимости кода для каждого. Этот код динамически добавляет символы, оставшиеся до любого атрибута 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>

источник

2011-12-13 21:59:43 gordon

В то время как клавиатура CTRL-V вставляет триггер обратного отсчета, мышь не делает пасты. Я сделал функцию обратного отсчета для обновления функции, а затем вызываю ее как с помощью keyup, так и с blur: '$ (this) .keyup (function() {myFcn (this)}). Blur (function() {myFcn (this)}). keyup(); 'и' function myFcn (argE) { var tId = $ (argE) .attr ("id"); var tMax = $ (argE) .attr ("maxLength"); var left = tMax - $ (argE) .val(). Length; if (left <0) left = 0; $ (argE) .val ($ (argE) .val(). Substr (0, tMax)); $ ('# cnt' + tId).текст («Осталось символов: + слева»; } 'Попытка справиться с событием вставки была уродливой для меня – gordon

Конечно, настоящие браузеры, такие как FireFox, теперь распознают атрибут textarea maxLength :) – gordon

Так что я взял @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); 
    }); 
});

Для тех, кому нужна так же, как мне :)

источник

2012-03-06 15:46:24 Christoffer

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

     });

источник

2015-03-29 14:28:28

При ответе, чтобы сделать его хорошим и полезным ответом, вам также нужно объяснить, как использовать свой код , – ZygD

@ZygD Этот вопрос был дан так много раз, так как я изначально разместил его в 2009 году! В любом случае приятно видеть разные подходы с одним и тем же результатом. Мне нравится идея отключения кнопки отправки, когда в textarea слишком много символов! Основываясь на этом ответе, я только что создал эту демонстрацию JSFiddle ... http://jsfiddle.net/jasondavis/ht7qdL3m/ – JasonDavis

Я просто пытаюсь написать запрос, например, твиттер. Я также работаю над некоторыми аспектами твиттера, например, когда персонажи идут in -ve. текст textarea выделен красным цветом –

Имейте в виду, что вы должны учитывать 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; 
}

источник

2015-10-12 20:05:19 trainer

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

ответ

Смежные вопросы