120

Je veux compter les caractères dans une zone de texte, alors je viens de faire:

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

Quel est le problème avec mon morceau de code? Ça ne marche pas! Eh bien, c'était une écriture pour débutant, j'ai besoin d'aide.

jquery textarea counter onkeyup Kyle
la source

À l'avenir, veuillez modifier votre question ou utiliser la fonction de commentaire sous les réponses pour ajouter des informations supplémentaires ou des clarifications. Les réponses doivent être des messages qui résolvent directement votre problème. Si vous publiez une solution à votre propre problème, acceptez votre solution comme la bonne réponse. J'ai supprimé beaucoup de vos «réponses», car vous en avez accepté une autre.

Tim Post

Compteur de limite de caractères JQuery

Expéditeur

169

Quelles erreurs voyez-vous dans le navigateur? Je peux comprendre pourquoi votre code ne fonctionne pas si ce que vous avez publié était incomplet, mais sans savoir que je ne peux pas le savoir avec certitude.

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

... fonctionne bien pour moi.

Edit: Vous devriez probablement effacer le charNum div, ou écrire quelque chose, s'ils sont au-dessus de la limite.

Caterham
la source

1

vraiment? J'ai juste un span au lieu de div pour id = 'charNum', laissez-moi revoir!

Kyle

Après avoir vu votre code complet, que vous attendiez-vous à ce qu'il fasse différemment? Qu'est-ce qui est "cassé" à ce sujet?

Caterham

vous pouvez supprimer le "else", juste parce que nous atteignons 500 ne signifie pas que nous devrions empêcher #charNum d'afficher la valeur, le "else" fera que le nombre s'arrêtera à 1 au lieu de 0 comme c'est le cas actuellement.

Joakim

@Joakim, j'ai supprimé l'autre mais, dans ce cas, j'aurai des nombres négatifs!

Kyle

Peut-être juste ajouter quelque chose au if, en définissant charNum pour dire "Vous avez atteint la limite", ou quelque chose comme ça.

Caterham

83

Version améliorée basée sur la fonction 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
la source

1

N'utilisez pas ça. Cette solution est imparfaite comme le souligne Etienne Martin.

Fabian Bigler

79

⚠️ La solution acceptée est défectueuse.

Voici deux scénarios dans lesquels l' keyupévénement ne sera pas déclenché:

L'utilisateur fait glisser le texte dans la zone de texte.
L'utilisateur fait un copier-coller du texte dans la zone de texte avec un clic droit (menu contextuel).

Utilisez inputplutôt l'événement HTML5 pour une solution plus robuste:

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

JavaScript ( démo ):

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

Et si vous voulez absolument utiliser 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
la source

4

Je ne savais pas de l' inputévénement. Merci

Abk

Une question rapide (vous n'avez pas encore essayé votre code / méthode) cela fonctionnera-t-il pour la saisie vocale?

Syfer

Je vais essayer ça. J'avais besoin de quelque chose comme ça pour un petit projet au travail.

Syfer

Le code ci-dessus ne fonctionnait pas sous iOS lorsque la voix est utilisée à la fois avec JS et jQuery. Des pensées?

Syfer

@Syfer Vous pouvez toujours utiliser un setInterval qui vérifie périodiquement le nombre de caractères sur iOS.

Etienne Martin

9

Échantillon HTML, utilisé partout où j'ai besoin d'un compteur, remarquez la pertinence des identifiants de zone de texte et de la deuxième plage: id="post"<-> id="rem_post"et le titre de la plage qui contient la quantité de caractères souhaitée de chaque zone de texte particulière

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

La fonction JavaScript, généralement placée avant </body>dans mon fichier de modèle, nécessite 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
la source

9

CA marchait bien pour moi.

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

graisses32
la source

7

substring()doit devenir substr().

Exemple: jsfiddle.net/xqyWV

mattsven
la source

@MattCurtis: vous devriez plutôt publier votre démo jsFiddle dans le message d'origine (pour obtenir plus de votes positifs et) pour la rendre plus marquable. J'ai essayé de modifier votre message et de coller le lien, mais ma modification a été rejetée.

Sk8erPeter

Pourriez-vous s'il vous plaît poster l'exemple COMPLET .. inclure la version jquery que vous avez utilisée. L'échantillon ci-dessus est inutile. Désolé!.

deepcell

@ B4NZ41 Fonctionne très bien pour moi. Il existe également d'autres réponses à ce problème qui y répondent mieux.

mattsven

4

Eh bien, ce n'est pas si différent de ce qui a été dit, mais cela fonctionne très bien dans tous les navigateurs.

L'idée est de supprimer tout texte qui dépasse la longueur définie.

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

Le code HTMl serait:

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

Youssef
la source

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

3

J'ai fait une combinaison de ce qui précède. Il permet l'arrêt de la saisie de texte, permet le retour arrière, et conserve le décompte, même en cas de retour arrière:

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

Merci à ces affiches avant moi !! J'espère que cela aide quelqu'un!

DJH
la source

3

J'ai créé mon propre plugin jQuery pour cette tâche, vous pouvez l'essayer ici:

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

Vous pouvez créer des compteurs de caractères à la volée (ainsi que les compteurs de caractères restants), vous pouvez définir si vous voulez couper le texte, vous pouvez définir les textes de suffixe et vous pouvez également définir un format court et son séparateur.

Voici un exemple d'utilisation:

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

});

Voici le code du 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
la source

Cela ne met pas à jour les compteurs lors du chargement initial s'il y a déjà du texte dans les éléments. Une solution triviale cependant.

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

2

Je me demandais comment faire la même chose et en prenant les idées de tout le monde ici, c'est ce que j'ai trouvé:

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

1

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

En outre, vous pouvez mettre votre propre identifiant d'élément ou classe au lieu de "h1" et l'événement de longueur compte vos caractères de chaîne de zone de texte ☻

parham rahimpour
la source

0

Votre code était un peu mélangé. Voici une version propre:

<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é
la source

Sly, croyez-moi, cela ne fonctionne pas, il semble que la fonction qui commence par .. function () {.. doit être en dehors de $ (document) .ready (function () {

Kyle

0

Essaye celui-là.

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

0

Une version plus générique afin que vous puissiez utiliser la fonction pour plus d'un champ.

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

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>

Utilisez ce qui suit pour ignorer l'utilisation de else et également ignorer le décompte négatif.

Shiva Charan
la source

0

Voici mon exemple. Souper 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>

Développer l'extrait

Ivan Milincic
la source

0

Nous n'étions satisfaits d'aucune des solutions proposées.

Nous avons donc créé une solution complète de compteur de caractères pour JQuery, basée sur jquery-jeditable . C'est une textareaextension de plugin qui peut compter dans les deux sens, affiche un message personnalisé, limite le nombre de caractères et prend également en charge jquery-datatables .

Vous pouvez le tester tout de suite sur JSFiddle .

Lien GitHub: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

Démarrage rapide

Ajoutez ces lignes à votre 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>

Puis:

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

Vaiden
la source

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

-1

Vous pouvez utiliser:

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

Compter les caractères dans la zone de texte

Réponses:

⚠️ La solution acceptée est défectueuse.

Démarrage rapide