120

Я хочу подсчитать символы в текстовом поле, поэтому я только что сделал:

<textarea id="field" onkeyup="countChar(this)"></textarea>

function countChar(val){
     var len = val.value.length;
     if (len >= 500) {
              val.value = val.value.substring(0, 500);
     } else {
              $('#charNum').text(500 - len);
     }
};

Что не так с моим фрагментом кода? Это не работает! Ну, почерк новичка, нужна помощь.

jquery textarea counter onkeyup рукав моря
источник

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

Тим Пост

Счетчик ограничения количества символов JQuery

отправитель

169

Какие ошибки вы видите в браузере? Я могу понять, почему ваш код не работает, если то, что вы опубликовали, было неполным, но я не знаю, что я не могу знать наверняка.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);
        }
      };
    </script>
  </head>

  <body>
    <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>
  </body>

</html>

... у меня отлично работает.

Изменить: вам, вероятно, следует очистить div charNum или написать что-нибудь, если они превышают лимит.

Caterham
источник

1

действительно? У меня есть только диапазон вместо div для id = 'charNum', позвольте мне посмотреть еще раз!

Kyle

Что вы ожидали от него, увидев полный код? Что в нем "сломано"?

Caterham

вы можете удалить «else», просто потому, что мы достигли 500, не означает, что мы должны запретить #charNum отображать значение, «else» остановит число на 1 вместо 0, как сейчас.

Joakim

@Joakim, я удалил else, но в этом случае я буду получать отрицательные числа!

Kyle

Может быть, просто добавьте что-нибудь в if, установив charNum, чтобы сказать «Вы достигли предела», или что-то в этом роде.

Caterham,

83

Улучшенная версия, основанная на функции Caterham :

$('#field').keyup(function () {
  var max = 500;
  var len = $(this).val().length;
  if (len >= max) {
    $('#charNum').text(' you have reached the limit');
  } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
  }
});

keithics
источник

1

Не используйте это. Это решение ошибочно, как указал Этьен Мартин.

Фабиан Биглер

79

⚠️ Принятое решение ошибочно.

Вот два сценария, при которых keyupсобытие не запускается:

Пользователь перетаскивает текст в текстовое поле.
Пользователь копирует и вставляет текст в текстовое поле, щелкнув правой кнопкой мыши (контекстное меню).

inputВместо этого используйте событие HTML5 для более надежного решения:

<textarea maxlength='140'></textarea>

JavaScript ( демонстрация ):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;

    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");
    }

    console.log(`${maxLength - currentLength} chars left`);
});

И если вы абсолютно хотите использовать jQuery:

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;

    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

Этьен Мартин
источник

4

Не знал о inputсобытии. Спасибо

Abk

Быстрый вопрос (еще не пробовал ваш код / метод), будет ли это работать для голосового ввода?

Syfer

Я попробую это сделать. Мне нужно было что-то подобное для небольшого проекта на работе.

Syfer

Приведенный выше код не работал в iOS, когда голос использовался как JS, так и jQuery. Есть предположения?

Syfer

@Syfer Вы всегда можете вернуться к setInterval, который периодически проверяет количество символов в iOS.

Этьен Мартин

9

Образец HTML, используемый везде, где мне нужен счетчик, обратите внимание на релевантность идентификаторов текстового поля и второго диапазона: id="post"<-> id="rem_post"и заголовок диапазона, который содержит желаемое количество символов для каждого конкретного текстового поля.

<textarea class="countit" name="post" id="post"></textarea>
<p>
  <span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>

Функция JavaScript, обычно помещаемая перед </body>моим файлом шаблона, требует jQuery

$(".countit").keyup(function () {
  var cmax = $("#rem_" + $(this).attr("id")).attr("title");

  if ($(this).val().length >= cmax) {
    $(this).val($(this).val().substr(0, cmax));
  }

  $("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);

});

humugus
источник

9

это сработало для меня.

$('#customText').on('keyup', function(event) {
   var len = $(this).val().length;
   if (len >= 40) {
      $(this).val($(this).val().substring(0, len-1));
   }
});

fatsouls32
источник

7

substring()должен стать substr().

Пример: jsfiddle.net/xqyWV

mattsven
источник

@MattCurtis: вам лучше разместить jsFiddle-demo в исходном посте (чтобы получить больше голосов и), чтобы сделать его более заметным. Я попытался отредактировать ваше сообщение и вставить ссылку, но мое изменение было отклонено.

Sk8erPeter

Не могли бы вы опубликовать ПОЛНЫЙ образец .. включите версию jquery, которую вы использовали. Образец выше бесполезен. Сожалею!.

deepcell

@ B4NZ41 У меня отлично работает. Есть также другие ответы на этот вопрос, которые лучше подходят для этого.

mattsven

4

Что ж, это не сильно отличается от того, что было сказано, но это очень хорошо работает во всех браузерах.

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

function countTextAreaChar(txtarea, l){
    var len = $(txtarea).val().length;
    if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
    else $('#charNum').text(l - len);
    }

Код HTMl будет:

<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>

Юсеф
источник

4

HTML

<form method="post">
<textarea name="postes" id="textAreaPost" placeholder="Write what's you new" maxlength="500"></textarea>

<div id="char_namb" style="padding: 4px; float: right; font-size: 20px; font-family: Cocon; text-align: center;">500 : 0</div>
</form>

JQuery

$(function(){
    $('#textAreaPost').keyup(function(){
      var charsno = $(this).val().length;
      $('#char_namb').html("500 : " + charsno);
    });
});

Elkingphp
источник

3

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

Код JavaScript:

$(document).ready(function () {

  $('#giftmsg').keypress(function (event) {
    var max = 250;
    var len = $(this).val().length;

    if (event.which < 0x20) {
      // e.which < 0x20, then it's not a printable character
      // e.which === 0 - Not a character
      return; // Do nothing
    }

    if (len >= max) {
      event.preventDefault();
    }

  });

  $('#giftmsg').keyup(function (event) {
    var max = 250;
    var len = $(this).val().length;
    var char = max - len;

    $('#textleft').text(char + ' characters left');

  });

});

HTML:

<div class="col3">
    <h2>3. Optional gift message</h2>
    Enter gift message. Limit 250 characters.<br /><br />
    <textarea cols="36" rows="5" id="giftmsg" ></textarea>
    <a style="padding:7px 0 0 0" href="#">Save Message</a>
    <div id="textleft">250 characters left</div>
</div>

Благодарим за плакаты передо мной !! Надеюсь, это кому-то поможет!

DJH
источник

3

Я создал свой собственный плагин jQuery для этой задачи, вы можете попробовать его здесь:

http://jsfiddle.net/Sk8erPeter/8NF4r/

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

Вот пример использования:

$(document).ready(function () {

    $('#first_textfield').characterCounter();

    $('#second_textfield').characterCounter({
        maximumCharacters: 20,
        chopText: true
    });

    $('#third_textfield').characterCounter({
        maximumCharacters: 20,
        shortFormat: true,
        shortFormatSeparator: " / ",
        positionBefore: true,
        chopText: true
    });

    $('#fourth_textfield').characterCounter({
        maximumCharacters: 20,
        characterCounterNeeded: true,
        charactersRemainingNeeded: true,
        chopText: false
    });

    $('#first_textarea').characterCounter({
        maximumCharacters: 50,
        characterCounterNeeded: true,
        charactersRemainingNeeded: false,
        chopText: true
    });

    $('#second_textarea').characterCounter({
        maximumCharacters: 25
    });

});

Вот код плагина:

/**
 * Character counter and limiter plugin for textfield and textarea form elements
 * @author Sk8erPeter
 */ 
(function ($) {
  $.fn.characterCounter = function (params) {
    // merge default and user parameters
    params = $.extend({
      // define maximum characters
      maximumCharacters: 1000,
      // create typed character counter DOM element on the fly
      characterCounterNeeded: true,
      // create remaining character counter DOM element on the fly
      charactersRemainingNeeded: true,
      // chop text to the maximum characters
      chopText: false,
      // place character counter before input or textarea element
      positionBefore: false,
      // class for limit excess
      limitExceededClass: "character-counter-limit-exceeded",
      // suffix text for typed characters
      charactersTypedSuffix: " characters typed",
      // suffix text for remaining characters
      charactersRemainingSuffixText: " characters left",
      // whether to use the short format (e.g. 123/1000)
      shortFormat: false,
      // separator for the short format
      shortFormatSeparator: "/"
    }, params);

    // traverse all nodes
    this.each(function () {
      var $this = $(this),
        $pluginElementsWrapper,
        $characterCounterSpan,
        $charactersRemainingSpan;

      // return if the given element is not a textfield or textarea
      if (!$this.is("input[type=text]") && !$this.is("textarea")) {
        return this;
      }

      // create main parent div
      if (params.characterCounterNeeded || params.charactersRemainingNeeded) {
        // create the character counter element wrapper
        $pluginElementsWrapper = $('<div>', {
          'class': 'character-counter-main-wrapper'
        });

        if (params.positionBefore) {
          $pluginElementsWrapper.insertBefore($this);
        } else {
          $pluginElementsWrapper.insertAfter($this);
        }
      }

      if (params.characterCounterNeeded) {
        $characterCounterSpan = $('<span>', {
          'class': 'counter character-counter',
          'text': 0
        });

        if (params.shortFormat) {
          $characterCounterSpan.appendTo($pluginElementsWrapper);

          var $shortFormatSeparatorSpan = $('<span>', {
            'html': params.shortFormatSeparator
          }).appendTo($pluginElementsWrapper);

        } else {
          // create the character counter element wrapper
          var $characterCounterWrapper = $('<div>', {
            'class': 'character-counter-wrapper',
            'html': params.charactersTypedSuffix
          });

          $characterCounterWrapper.prepend($characterCounterSpan);
          $characterCounterWrapper.appendTo($pluginElementsWrapper);
        }
      }

      if (params.charactersRemainingNeeded) {

        $charactersRemainingSpan = $('<span>', {
          'class': 'counter characters-remaining',
          'text': params.maximumCharacters
        });

        if (params.shortFormat) {
          $charactersRemainingSpan.appendTo($pluginElementsWrapper);
        } else {
          // create the character counter element wrapper
          var $charactersRemainingWrapper = $('<div>', {
            'class': 'characters-remaining-wrapper',
            'html': params.charactersRemainingSuffixText
          });
          $charactersRemainingWrapper.prepend($charactersRemainingSpan);
          $charactersRemainingWrapper.appendTo($pluginElementsWrapper);
        }
      }

      $this.keyup(function () {

        var typedText = $this.val();
        var textLength = typedText.length;
        var charactersRemaining = params.maximumCharacters - textLength;

        // chop the text to the desired length
        if (charactersRemaining < 0 && params.chopText) {
          $this.val(typedText.substr(0, params.maximumCharacters));
          charactersRemaining = 0;
          textLength = params.maximumCharacters;
        }

        if (params.characterCounterNeeded) {
          $characterCounterSpan.text(textLength);
        }

        if (params.charactersRemainingNeeded) {
          $charactersRemainingSpan.text(charactersRemaining);

          if (charactersRemaining <= 0) {
            if (!$charactersRemainingSpan.hasClass(params.limitExceededClass)) {
              $charactersRemainingSpan.addClass(params.limitExceededClass);
            }
          } else {
            $charactersRemainingSpan.removeClass(params.limitExceededClass);
          }
        }
      });

    });

    // allow jQuery chaining
    return this;

  };
})(jQuery);

Sk8erPeter
источник

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

Равендаркский

2

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

    var elem = $("#cntr");  
    $("#status_txt").limiter(160, elem);

Саураб Чандра Патель
источник

2

Мне было интересно, как сделать то же самое, и я позаимствовал идеи у всех, вот что я придумал:

JsFiddle

<textarea name="message" rows="4" cols="24" maxlength="1000" id="message" placeholder="Message:" style=""></textarea><br/>
<span id="charNum"></span>

$('#message').keyup(function () {
  max = this.getAttribute("maxlength");
  var len = $(this).val().length;
   if (len >= max) {
    $('#charNum').text(' you have reached the limit');
   } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
   }
});

bckelley
источник

1

$(document).ready(function() {
    var count = $("h1").text().length;
    alert(count);
});

Кроме того, вы можете указать свой собственный идентификатор элемента или класс вместо «h1», а событие длины подсчитает количество ваших символов в строке текстовой области ☻

Пархам Рахимпур
источник

0

Ваш код был немного перепутан. Вот чистая версия:

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
            $.post("SetAndGet.php", {
                know: $("#know").val()
            }, function(data) {
                $("#know_list").html(data);
            });
        });

        function countChar(val) {
            var len = val.value.length;
            if (len >= 500) {
                val.value = val.value.substring(0, 500);
            } else {
                $('#charNum').text(500 - len);
            }
        }
    });
</script>

Сильвен Гильопе
источник

Хитрый, поверьте мне, это не работает, похоже, что функция, которая начинается с .. function () {.. должна быть вне $ (document) .ready (function () {

Кайл

0

Попробуй это.

<textarea maxlength="410" name="about_me" onkeydown="CountLeft(this.form.about_me, this.form.left);" onkeyup="CountLeft(this.form.about_me,this.form.left); "></textarea>

<input maxlength="3" name="left" readonly="" size="3" type="text" value="410" /> characters left

<script>
function CountLeft(field, count) 
{
    var max = "410";
    if (field.value.length > max)
    {
        field.value = field.value.substring(0, max);
    }
    else
    {
        count.value = max - field.value.length;
    }
}
</script>

Hardik
источник

0

Более общая версия, позволяющая использовать функцию более чем для одного поля.

<script src="../site/jquery/jquery.min.js" ></script>
<script type="text/javascript">

function countChar(inobj, maxl, outobj) {
    var len = inobj.value.length;
    var msg = ' chr left';
    if (len >= maxl) {
        inobj.value = inobj.value.substring(0, maxl);
        $(outobj).text(0 + msg);
    } else {
        $(outobj).text(maxl - len + msg);
    }
}


$(document).ready(function(){

    //set up summary field character count
    countChar($('#summary').get(0),500, '#summarychrs'); //show inital value on page load
    $('#summary').keyup(function() {
        countChar(this, 500, '#summarychrs'); //set up on keyup event function
    });

});
</script>

<textarea name="summary" id="summary" cols="60" rows="3" ><?php echo $summary ?></textarea> 
<span id="summarychrs">0</span>

Lumis
источник

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>

            function countChar(val) 
            {

             var limit = 1024;

            if ( val.length > limit )
              { 
              $("#comment").val(val.substring(0, limit-1));
              val.length = limit;
              }

              $("#count").html((limit)-(val.length));     
              }

        </script>

        <textarea id="comment" onKeyUp="countChar(this.value)" required></textarea>

        <div id="count"></div>

Используйте следующее, чтобы пропустить использование else, а также пропустить получение отрицательного счета.

Шива Чаран
источник

0

Вот мой пример. Ужин простой

$(document).ready(function() {
      
        var textarea    = $("#my_textarea");
  
        textarea.keydown(function(event) {
          
            var numbOfchars = textarea.val();
            var len = numbOfchars.length;
            $(".chars-counter").text(len);

        });
  
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="my_textarea" class="uk-textarea" rows="5" name="text"></textarea>
<h1 class="chars-counter">0</h1>

Развернуть фрагмент

Иван Милинчич
источник

0

Нам не понравилось ни одно из намеченных решений.

Итак, мы создали полное решение для счетчика символов для JQuery, построенное на основе jquery-jeditable . Это textareaрасширение плагина, которое может рассчитывать в обоих направлениях, отображает настраиваемое сообщение, ограничивает количество символов, а также поддерживает jquery-datatables. .

Вы можете сразу протестировать это на JSFiddle .

Ссылка на GitHub: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

Быстрый старт

Добавьте эти строки в свой HTML:

<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/realworld_jquery_jeditable_charcount@1.0.0/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/realworld_jquery_jeditable_charcount@1.0.0/dist/jquery.charcounter.realworld.min.js"></script>

А потом:

$("#myTextArea4").charCounter();

Vaiden
источник

-1

$('#field').keyup(function () {
    var max = 160;
    var len = $(this).val().length;
//  var char = max - len;
    var messages = Math.ceil(len / 160);
    if (len >= max) {
        $('#charNum').text('(' + messages + ') ' + len + '/' + max);
    } else {
        $('#charNum').text(len + '/' + max);
    }
    });

Гимали Косты
источник

-1

Вы можете использовать:

    $(document).ready(function () {
  $('#ID').keyup(function () {
   var val = $(this).val();
   len = val.length;
   if (len >= 140) {
    $(this).text(val.substring(0, 140));
   } else {
    console.log(140 - len);
    $('#charNum').empty().append(140 - len);
   }
  });
 });

demenvil
источник

Подсчет символов в текстовом поле

Ответы:

⚠️ Принятое решение ошибочно.

Быстрый старт