Hitung karakter di textarea

120

Saya ingin menghitung karakter dalam textarea, jadi saya hanya membuat:

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

Apa yang salah dengan potongan kode saya? Tidak bekerja! Nah, itu tadi tulisan tangan newbie, butuh bantuan.

jquery  textarea  counter  onkeyup 
— Kyle
sumber
Di masa mendatang, edit pertanyaan Anda atau gunakan fitur komentar di bawah jawaban untuk menambahkan informasi atau klarifikasi tambahan. Jawaban harus berupa posting yang secara langsung menyelesaikan masalah Anda. Jika Anda memposting solusi untuk masalah Anda sendiri, terima solusi Anda sebagai jawaban yang benar. Saya telah menghapus banyak 'jawaban' Anda, karena Anda telah menerima yang lain.
— Tim Post
— Pengirim

Jawaban:

169

Kesalahan apa yang Anda lihat di browser? Saya dapat memahami mengapa kode Anda tidak berfungsi jika apa yang Anda posting tidak lengkap, tetapi tanpa mengetahui bahwa saya tidak dapat mengetahui secara pasti.

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

... bekerja dengan baik untukku.

Sunting: Anda mungkin harus menghapus div charNum, atau menulis sesuatu, jika mereka melebihi batas.

— Caterham
sumber
1
Betulkah? Saya hanya memiliki rentang alih-alih div untuk id = 'charNum', coba saya lihat lagi!
— Kyle
Setelah melihat kode lengkap Anda, apa yang Anda harapkan untuk dilakukan secara berbeda? Apa yang "rusak" tentang itu?
— Caterham
Anda dapat menghapus "else", hanya karena kita menekan 500 tidak berarti kita harus mencegah #charNum untuk menampilkan nilainya, "else" akan membuat angka berhenti di 1, bukan 0 seperti sekarang.
— Joakim
@Joakim, saya menghapus yang lain tetapi, dalam hal ini, saya akan mendapatkan angka negatif!
— Kyle
Mungkin hanya menambahkan sesuatu ke jika, menyetel charNum untuk mengatakan "Anda telah mencapai batas", atau sesuatu seperti itu.
— Caterham
83

Versi yang ditingkatkan berdasarkan fungsi 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
sumber
1
Jangan gunakan ini. Solusi ini memiliki kelemahan seperti yang ditunjukkan oleh Etienne Martin.
— Fabian Bigler
79

⚠️ Solusi yang diterima cacat.

Berikut adalah dua skenario di mana keyupacara tidak akan diaktifkan:

  1. Pengguna menyeret teks ke dalam textarea.
  2. Pengguna copy-paste teks di textarea dengan klik kanan (menu kontekstual).

Gunakan inputacara HTML5 sebagai gantinya untuk solusi yang lebih kuat:

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

Dan jika Anda benar-benar ingin menggunakan 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
sumber
4
Tidak tahu inputacara tersebut. Terima kasih
— Abk
Sebuah pertanyaan singkat (belum mencoba kode / metode Anda) apakah ini akan berfungsi untuk input suara?
— Syfer
1
@Yfer Tentu.
— Etienne Martin
Saya akan mencobanya. Saya membutuhkan sesuatu seperti ini untuk sebuah proyek kecil di tempat kerja.
— Syfer
Kode di atas tidak berfungsi di iOS ketika suara digunakan baik JS dan jQuery. Ada pemikiran?
— Syfer
9

Contoh HTML, digunakan di mana pun saya membutuhkan penghitung, perhatikan relevansi ID textarea dan span kedua: id="post"<-> id="rem_post"dan judul span yang menyimpan jumlah karakter yang diinginkan dari setiap textarea tertentu

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

Fungsi JavaScript, biasanya ditempatkan sebelumnya </body>di file template saya, membutuhkan 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
sumber
9

ini bekerja dengan baik untuk saya.

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

substring()perlu menjadi substr().

Contoh: jsfiddle.net/xqyWV

— mattsven
sumber
@MattCurtis: Anda sebaiknya memposting demo-jsFiddle Anda di posting asli (untuk mendapatkan lebih banyak upvote dan) untuk membuatnya lebih dapat ditandai. Saya mencoba mengedit posting Anda dan menempelkan linknya, tetapi edit saya ditolak.
— Sk8erPeter
Bisakah Anda memposting sampel LENGKAP .. sertakan versi jquery yang telah Anda gunakan. Sampel di atas tidak berguna. Maaf!.
— deepcell
@ B4NZ41 Bekerja dengan baik untuk saya. Ada juga jawaban lain untuk ini yang membahasnya dengan lebih baik.
— mattsven
4

Nah, ini tidak jauh berbeda dari apa yang telah dikatakan, tetapi ini bekerja dengan sangat baik di semua browser.

Idenya adalah untuk menghapus teks apa pun yang melebihi panjang yang ditentukan.

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

Kode HTMl adalah:

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

Saya melakukan kombinasi di atas. Ini memungkinkan untuk menghentikan entri teks, dan memungkinkan untuk spasi mundur, plus menjaga hitungan, bahkan saat spasi mundur:

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

Penghargaan untuk poster-poster itu sebelum saya !! Semoga ini bisa membantu seseorang!

— DJH
sumber
3

Saya membuat plugin jQuery saya sendiri untuk tugas ini, Anda dapat mencobanya di sini:

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

Anda dapat membuat penghitung karakter dengan cepat (dan juga penghitung karakter yang tersisa), Anda dapat menentukan apakah Anda ingin memotong teks, Anda dapat menentukan teks sufiks dan Anda juga dapat menentukan format pendek dan pemisahnya.

Berikut contoh penggunaan:

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

});

Berikut kode pluginnya:

/**
 * 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
sumber
Ini tidak memperbarui penghitung pada pemuatan awal jika sudah ada teks dalam elemen. Perbaikan yang sepele sekalipun.
— 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
sumber
2

Saya bertanya-tanya bagaimana melakukan hal yang sama ini dan mengambil ide dari semua orang di sini, inilah yang saya dapatkan:

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

Juga, Anda dapat menempatkan id elemen atau kelas Anda sendiri daripada "h1" dan event panjang menghitung karakter dari string area teks ☻

— parham rahimpour
sumber
0

Kode Anda agak campur aduk. Ini adalah versi bersihnya:

<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é
sumber
Sly, percayalah, itu tidak berhasil, tampaknya fungsi yang dimulai dengan .. function () {.. harus keluar dari $ (document) .ready (function () {
— Kyle
0

Coba yang ini.

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

Versi yang lebih umum sehingga Anda dapat menggunakan fungsi untuk lebih dari satu bidang.

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

Gunakan berikut ini untuk melewati penggunaan else dan juga tidak mendapatkan hitungan negatif.

— Siwa Charan
sumber
0

Berikut contoh saya. Makan malam sederhana 

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

— Ivan Milincic
sumber
0

Kami tidak senang dengan solusi yang dimaksudkan.

Jadi kami telah membuat solusi penghitung karakter lengkap untuk JQuery, dibangun di atas jquery-jeditable . Ini adalah textareaekstensi plugin yang dapat menghitung ke dua arah, menampilkan pesan khusus, membatasi jumlah karakter, dan juga mendukung jquery-datatables .

Anda dapat langsung mengujinya di JSFiddle .

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

Mulai cepat

Tambahkan baris berikut ke HTML Anda:

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

Lalu:

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

Anda dapat menggunakan: 

    $(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
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.