120

Quero contar caracteres em uma área de texto, então acabei de fazer:

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

O que há de errado com meu pedaço de código? Não funciona! Bem, essa foi uma caligrafia para iniciantes, preciso de uma ajuda.

jquery textarea counter onkeyup Kyle
fonte

No futuro, edite sua pergunta ou use o recurso de comentário em respostas para adicionar informações ou esclarecimentos adicionais. As respostas devem ser postagens que resolvam diretamente o seu problema. Se você postar uma solução para o seu próprio problema, aceite-a como a resposta correta. Eu removi muitas das suas 'respostas', pois você aceitou outras.

Tim Post

Contador de limite de caracteres JQuery

Remetente

169

Quais erros você está vendo no navegador? Entendo por que seu código não funciona se o que você postou estava incompleto, mas sem saber que não tenho certeza.

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

... funciona bem para mim.

Editar: Você provavelmente deve limpar a div charNum ou escrever algo, se eles estiverem acima do limite.

Caterham
fonte

1

realmente? Eu tenho apenas um intervalo em vez de div para id = 'charNum', deixe-me ver novamente!

Kyle

Depois de ver seu código completo, o que você esperava que ele fizesse diferente? O que é "quebrado" sobre isso?

Caterham

você pode remover o "else", apenas porque atingimos 500 não significa que devemos impedir que #charNum exiba o valor, o "else" fará o número parar em 1 em vez de 0, como está agora.

21311 Joakim

@ Joakim, eu removi o else, mas, neste caso, eu vou estar recebendo números negativos!

Kyle

Talvez apenas adicione algo ao if, definindo charNum para dizer "Você atingiu o limite" ou algo assim.

Caterham

83

Versão melhorada com base na função de 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
fonte

1

Não use isso. Esta solução é falha, como apontado por Etienne Martin.

Fabian Bigler

78

Solution️ A solução aceita é falha.

Aqui estão dois cenários em que o keyupevento não será acionado:

O usuário arrasta o texto para a área de texto.
O usuário copia e cola o texto na área de texto com um clique direito (menu contextual).

Use o inputevento HTML5 para obter uma solução mais robusta:

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

JavaScript ( demo ):

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

E se você absolutamente deseja usar o 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");
    }
});

Etienne Martin
fonte

4

Não sabia do inputevento. Graças

Abk

Uma pergunta rápida (ainda não experimentou seu código / método) funcionará para entrada de voz?

Syfer

1

@ Syfer Absolutamente.

Etienne Martin

Eu vou tentar isso. Eu precisava de algo assim para um pequeno projeto no trabalho.

Syfer

O código acima não funcionou no iOS quando a voz é usada tanto no JS quanto no jQuery. Alguma ideia?

Syfer

9

A amostra HTML, usada sempre que eu precisar de um contador, observe a relevância dos IDs da área de texto e do segundo período: id="post"<-> id="rem_post"e o título do período que contém a quantidade de caracteres desejada de cada área de texto específica

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

A função JavaScript, geralmente colocada antes </body>no meu arquivo de modelo, requer 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
fonte

9

isso funcionou bem pra mim.

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

fatsouls32
fonte

7

substring()precisa se tornar substr().

Exemplo: jsfiddle.net/xqyWV

Mattsven
fonte

@ MattCurtis: você deveria postar sua demo jsFiddle na postagem original (para obter mais votos e) para torná-la mais marcável. Tentei editar sua postagem e colar o link, mas minha edição foi rejeitada.

Sk8erPeter

Você poderia postar a amostra COMPLETA .. inclua a versão jquery que você usou. A amostra acima é inútil. Desculpe!.

deepcell

@ B4NZ41 Funciona bem para mim. Há também outras respostas para isso que abordam melhor.

mattsven

4

Bem, isso não é tão diferente do que foi dito, mas funciona muito bem em todos os navegadores.

A idéia é excluir qualquer texto que exceda o comprimento definido.

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

O código HTMl seria:

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

Youssef
fonte

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
fonte

3

Eu fiz uma combinação dos itens acima. Ele permite a interrupção da entrada de texto e o retrocesso, além de manter a contagem, mesmo quando retrocede:

Código 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>

Crédito para os pôsteres antes de mim !! Espero que isso ajude alguém!

DJH
fonte

3

Eu criei meu próprio plugin jQuery para esta tarefa, você pode experimentá-lo aqui:

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

Você pode criar contadores de caracteres on-the-fly (e também contadores de caracteres restantes), definir se deseja cortar texto, definir os textos de sufixo e também definir um formato curto e seu separador.

Aqui está um exemplo de uso:

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

});

Aqui está o código do plugin:

/**
 * 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
fonte

Isso não atualiza os contadores no carregamento inicial se já houver texto nos elementos. Uma correção trivial embora.

Ravendarksky

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

Saurabh Chandra Patel
fonte

2

Fiquei me perguntando como fazer a mesma coisa e tendo idéias de todos aqui é isso que eu vim com:

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
fonte

1

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

Além disso, você pode colocar seu próprio ID ou classe de elemento em vez de "h1" e o evento length contar seus caracteres da string da área de texto ☻

Parham Rahimpour
fonte

0

Seu código estava um pouco confuso. Aqui está uma versão limpa:

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

Sylvain Guillopé
fonte

Sly, acredite, isso não funciona, parece que a função que começa com .. function () {.. precisa estar fora de $ (document) .ready (function () {

Kyle

0

Tente este.

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

0

Uma versão mais genérica para que você possa usar a função em mais de um campo.

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

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>

Use o seguinte para pular usando else e também pular a contagem negativa.

Shiva Charan
fonte

0

Aqui está o meu exemplo. Ceia simples

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

Expandir snippet

Ivan Milincic
fonte

0

Não ficamos satisfeitos com nenhuma das soluções propostas.

Portanto, criamos uma solução completa de contador de caracteres para o JQuery, construída sobre o jquery-jeditable . É uma textareaextensão de plug - in que pode contar para os dois lados, exibe uma mensagem personalizada, limita a contagem de caracteres e também suporta jquery-datatables .

Você pode testá-lo imediatamente no JSFiddle .

Link do GitHub: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

Começo rápido

Adicione estas linhas ao seu HTML:

<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.charcounter.realworld.min.js"></script>

E depois:

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

Vaiden
fonte

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

Himali Kosty
fonte

-1

Você pode usar:

    $(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
fonte

Contar caracteres na área de texto

Respostas:

Solution️ A solução aceita é falha.

Começo rápido