Cuenta caracteres en área de texto

120

Quiero contar caracteres en un área de texto, así que acabo de hacer:

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

¿Qué pasa con mi código? ¡No funciona! Bueno, esa era una letra de novato, necesito ayuda.

jquery  textarea  counter  onkeyup 
— Kyle
fuente
En el futuro, edite su pregunta o use la función de comentarios debajo de las respuestas para agregar información adicional o aclaraciones. Las respuestas deben ser publicaciones que resuelvan directamente su problema. Si publica una solución a su propio problema, acepte su solución como la respuesta correcta. He eliminado muchas de sus "respuestas", ya que ha aceptado otra.
— Tim Post
— Remitente

Respuestas:

169

¿Qué errores ves en el navegador? Puedo entender por qué su código no funciona si lo que publicó estaba incompleto, pero sin saberlo, no puedo estar seguro.

<!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 bien para mí.

Editar: probablemente debería borrar el div charNum, o escribir algo, si están por encima del límite.

— Caterham
fuente
1
¿De Verdad? Solo tengo un intervalo en lugar de div para id = 'charNum', ¡déjame ver de nuevo!
— Kyle
Después de ver su código completo, ¿qué esperaba que hiciera de manera diferente? ¿Qué tiene de "roto"?
— Caterham
puede eliminar el "else", solo porque llegamos a 500 no significa que debamos evitar que #charNum muestre el valor, el "else" hará que el número se detenga en 1 en lugar de 0 como está ahora.
— Joakim
@Joakim, eliminé el else pero, en este caso, obtendré nums negativos.
— Kyle
Tal vez solo agregue algo al if, configurando charNum para que diga "Has alcanzado el límite", o algo así.
— Caterham
83

Versión mejorada basada en la función 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
fuente
1
No uses esto. Esta solución es defectuosa como señaló Etienne Martin.
— Fabian Bigler
79

⚠️ La solución aceptada es defectuosa.

Aquí hay dos escenarios en los keyupque el evento no se activará:

  1. El usuario arrastra texto al área de texto.
  2. El usuario copia y pega el texto en el área de texto con un clic derecho (menú contextual).

Utilice el inputevento HTML5 en su lugar para una solución más sólida:

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

JavaScript ( demostración ):

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

Y si absolutamente quieres usar 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 Martín
fuente
4
No sabía del inputevento. Gracias
— Abk
Una pregunta rápida (aún no ha probado su código / método) ¿funcionará para la entrada de voz?
— Syfer
Probaré esto. Necesitaba algo como esto para un pequeño proyecto en el trabajo.
— Syfer
El código anterior no funcionó en iOS cuando la voz se usa tanto en JS como en jQuery. ¿Alguna idea?
— Syfer
@Syfer Siempre puede recurrir a un setInterval que comprueba periódicamente el recuento de caracteres en iOS.
— Etienne Martin
9

Ejemplo de HTML, utilizado siempre que necesite un contador, observe la relevancia de los ID del área de texto y el segundo intervalo: id="post"<-> id="rem_post"y el título del intervalo que contiene la cantidad de caracteres deseada de cada área de texto en particular

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

La función de JavaScript, generalmente colocada antes </body>en mi archivo de plantilla, requiere 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
fuente
9

Esto funcionó bien para mi.

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

substring()necesita convertirse substr().

Ejemplo: jsfiddle.net/xqyWV

— mattsven
fuente
@MattCurtis: debería publicar su demostración de jsFiddle en la publicación original (para obtener más votos positivos y) para que sea más notable. Intenté editar tu publicación y pegar el enlace, pero mi edición fue rechazada.
— Sk8erPeter
¿Podría publicar la muestra COMPLETA ... incluir la versión de jquery que ha utilizado? La muestra de arriba es inútil. ¡Lo siento!.
— deepcell
@ B4NZ41 Funciona bien para mí. También hay otras respuestas para esto que lo abordan mejor.
— mattsven
4

Bueno, esto no es tan diferente de lo que se ha dicho, pero funciona muy bien en todos los navegadores.

La idea es eliminar cualquier texto que sobrepase la longitud definida.

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

El código HTMl sería:

<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>
— Youssef
fuente
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
fuente
3

Hice una combinación de lo anterior. Permite detener la entrada de texto y permite retroceder, además mantiene el recuento, incluso cuando 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 a esos carteles antes que yo !! ¡Espero que esto ayude a alguien!

— DJH
fuente
3

Creé mi propio complemento jQuery para esta tarea, puedes probarlo aquí:

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

Puede crear contadores de caracteres sobre la marcha (y también contadores de caracteres restantes), puede definir si desea cortar el texto, puede definir los textos de sufijo y también puede definir un formato corto y su separador.

Aquí hay un ejemplo 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
    });

});

Aquí está el código del complemento:

/**
 * 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
fuente
Esto no actualiza los contadores en la carga inicial si ya hay texto en los elementos. Aunque una solución trivial.
— 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
fuente
2

Me preguntaba cómo hacer esto mismo y tomando ideas de todos aquí, esto es lo que se me ocurrió:

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
fuente
1 
$(document).ready(function() {
    var count = $("h1").text().length;
    alert(count);
});

Además, puede poner su propio ID de elemento o clase en lugar de "h1" y el evento de longitud cuenta los caracteres de la cadena del área de texto ☻

— parham rahimpour
fuente
0

Tu código estaba un poco confuso. Aquí hay una versión limpia:

<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é
fuente
Sly, créeme, eso no funciona, parece que la función que comienza con .. function () {.. necesita estar fuera de $ (document) .ready (function () {
— Kyle
0

Prueba 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
fuente
0

Una versión más genérica para que pueda usar la función para más de un 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
fuente
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>

Utilice lo siguiente para omitir el uso de else y también omitir el recuento negativo.

— Shiva Charan
fuente
0

Aquí mi ejemplo. Cena simple 

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

— Ivan Milincic
fuente
0

No estábamos contentos con ninguna de las soluciones propuestas.

Así que hemos creado una solución completa de contador de caracteres para JQuery, construida sobre jquery-jeditable . Es una textareaextensión de complemento que puede contar en ambos sentidos, muestra un mensaje personalizado, limita el recuento de caracteres y también admite jquery-datatables .

Puede probarlo de inmediato en JSFiddle .

Enlace de GitHub: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

Inicio rápido

Agrega estas líneas a tu 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>

Y entonces:

$("#myTextArea4").charCounter();
— Vaiden
fuente
-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
fuente
-1

U puede 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
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.