Policz znaki w obszarze tekstowym

120

Chcę policzyć znaki w obszarze tekstowym, więc właśnie utworzyłem:

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

Co jest nie tak z moim fragmentem kodu? To nie działa! Cóż, to było pismo początkującego, potrzebuję pomocy.

jquery  textarea  counter  onkeyup 
— Kyle
źródło
W przyszłości zmień swoje pytanie lub użyj funkcji komentowania pod odpowiedziami, aby dodać dodatkowe informacje lub wyjaśnienia. Odpowiedzi powinny być postami, które bezpośrednio rozwiązują Twój problem. Jeśli opublikujesz rozwiązanie swojego problemu, zaakceptuj je jako poprawną odpowiedź. Usunąłem wiele Twoich „odpowiedzi”, ponieważ zaakceptowałeś inne.
— Tim Post
— Sender

Odpowiedzi:

169

Jakie błędy widzisz w przeglądarce? Rozumiem, dlaczego Twój kod nie działa, jeśli to, co opublikowałeś, jest niekompletne, ale nie wiem, że nie mam pewności.

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

... u mnie działa dobrze.

Edycja: Prawdopodobnie powinieneś wyczyścić div charNum lub napisać coś, jeśli przekraczają limit.

— Caterham
źródło
1
naprawdę? Mam tylko rozpiętość zamiast div dla id = 'charNum', pokażę jeszcze raz!
— Kyle
Czego spodziewałeś się po obejrzeniu całego kodu? Co w tym jest „zepsute”?
— Caterham
możesz usunąć „else”, tylko to, że trafiliśmy 500, nie oznacza, że ​​powinniśmy uniemożliwić #charNum wyświetlanie wartości, „else” sprawi, że liczba zatrzyma się na 1 zamiast 0, tak jak jest teraz.
— Joakim
@Joakim, usunąłem pozostałe, ale w tym przypadku otrzymam liczby ujemne!
— Kyle
Może po prostu dodaj coś do if, ustawiając charNum na „Osiągnąłeś limit” lub coś w tym rodzaju.
— Caterham
83

Ulepszona wersja oparta na funkcji Caterhama :

$('#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
źródło
1
Nie używaj tego. To rozwiązanie jest wadliwe, jak wskazał Etienne Martin.
— Fabian Bigler
79

⚠️ Przyjęte rozwiązanie jest błędne.

Oto dwa scenariusze, w których keyupzdarzenie nie zostanie uruchomione:

  1. Użytkownik przeciąga tekst do obszaru tekstu.
  2. Użytkownik kopiuje i wkleja tekst w obszarze tekstowym prawym przyciskiem myszy (menu kontekstowe).

inputZamiast tego użyj zdarzenia HTML5 , aby uzyskać bardziej niezawodne rozwiązanie:

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

JavaScript ( wersja demonstracyjna ):

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

A jeśli absolutnie chcesz używać 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
źródło
4
Nie wiedziałem o inputwydarzeniu. Dzięki
— Abk
Szybkie pytanie (nie wypróbowałem jeszcze swojego kodu / metody) czy to zadziała w przypadku wprowadzania głosowego?
— Syfer
Spróbuję tego. Potrzebowałem czegoś takiego do małego projektu w pracy.
— Syfer
Powyższy kod nie działał w iOS, gdy używany jest głos zarówno JS, jak i jQuery. jakieś pomysły?
— Syfer,
@Syfer Zawsze możesz wrócić do setInterval, który okresowo sprawdza liczbę znaków w systemie iOS.
— Etienne Martin
9

Przykład HTML, używany wszędzie tam, gdzie potrzebuję licznika, zwróć uwagę na znaczenie identyfikatorów obszaru tekstowego i drugiego zakresu: id="post"<-> id="rem_post"oraz tytuł zakresu, który zawiera żądaną liczbę znaków każdego konkretnego obszaru tekstowego

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

Funkcja JavaScript, zwykle umieszczona wcześniej </body>w moim pliku szablonu, wymaga 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
źródło
9

to działało dobrze dla mnie.

$('#customText').on('keyup', function(event) {
   var len = $(this).val().length;
   if (len >= 40) {
      $(this).val($(this).val().substring(0, len-1));
   }
});
— dusze suszy 32
źródło
7

substring()musi się stać substr().

Przykład: jsfiddle.net/xqyWV

— mattsven
źródło
@MattCurtis: powinieneś raczej opublikować swoje jsFiddle-demo w oryginalnym poście (aby uzyskać więcej upvotes i), aby było bardziej widoczne. Próbowałem edytować Twój post i wkleić link, ale moja zmiana została odrzucona.
— Sk8erPeter
Czy mógłbyś opublikować PEŁNĄ próbkę .. Dołącz wersję jquery, której używałeś. Powyższa próbka jest bezużyteczna. Przepraszam!.
— deepcell
@ B4NZ41 Działa dobrze dla mnie. Istnieją również inne odpowiedzi na to, które lepiej to rozwiązują.
— mattsven
4

Cóż, nie różni się to zbytnio od tego, co zostało powiedziane, ale działa to bardzo dobrze we wszystkich przeglądarkach.

Chodzi o to, aby usunąć dowolny tekst, który przekracza zdefiniowaną długość.

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

Kod HTMl wyglądałby tak:

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

Zrobiłem kombinację powyższych. Pozwala na zatrzymanie wpisywania tekstu i pozwala na cofanie, a także utrzymuje licznik, nawet podczas cofania:

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

Podziękowania dla tych plakatów przede mną !! Mam nadzieję, że to komuś pomoże!

— DJH
źródło
3

Stworzyłem własną wtyczkę jQuery do tego zadania, możesz ją wypróbować tutaj:

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

Możesz tworzyć liczniki znaków w locie (a także pozostałe liczniki znaków), możesz określić, czy chcesz pociąć tekst, możesz zdefiniować teksty sufiksów, a także zdefiniować krótki format i jego separator.

Oto przykład użycia:

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

});

Oto kod wtyczki:

/**
 * 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
źródło
Nie powoduje to aktualizacji liczników przy początkowym załadowaniu, jeśli elementy już zawierają tekst. Jednak trywialna poprawka.
— 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
źródło
2

Zastanawiałem się, jak zrobić to samo i biorąc pomysły od wszystkich tutaj, oto co wymyśliłem:

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
źródło
1 
$(document).ready(function() {
    var count = $("h1").text().length;
    alert(count);
});

Możesz także wstawić własny identyfikator lub klasę elementu zamiast „h1” i licznik zdarzenia długości znaków w ciągu obszaru tekstowego ☻

— parham rahimpour
źródło
0

Twój kod był trochę pomieszany. Oto czysta wersja:

<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é
źródło
Sly, uwierz mi, to nie działa, wydaje się, że funkcja, która zaczyna się od .. function () {.. musi być poza $ (dokument) .ready (function () {
— Kyle
0

Spróbuj tego.

<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
źródło
0

Bardziej ogólna wersja, dzięki czemu można używać funkcji dla więcej niż jednego pola.

<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
źródło
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>

Użyj poniższego, aby pominąć używanie else, a także pominąć uzyskiwanie ujemnej liczby.

— Shiva Charan
źródło
0

Tutaj mój przykład. Kolacja prosta 

$(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>
Rozwiń fragment

— Ivan Milincic
źródło
0

Nie byliśmy zadowoleni z żadnego z zamierzonych rozwiązań.

Dlatego stworzyliśmy kompletne rozwiązanie licznika znaków dla JQuery, zbudowane na bazie jquery-jeditable . Jest to textarearozszerzenie wtyczki, które może liczyć w obie strony, wyświetla niestandardową wiadomość, ogranicza liczbę znaków, a także obsługuje jquery-datatables .

Możesz to przetestować od razu na JSFiddle .

Łącze do GitHub: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

Szybki start

Dodaj te wiersze do kodu 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>

I wtedy:

$("#myTextArea4").charCounter();
— Vaiden
źródło
-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
źródło
-1

Możesz użyć: 

    $(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
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.