计算文本区域中的字符

120

我想计算文本区域中的字符，所以我做了：

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

我的代码有什么问题？这是行不通的！好吧，那是新手的笔迹，需要帮助。

jquery  textarea  counter  onkeyup 
— 凯尔
source
将来，请编辑您的问题或使用答案下方的评论功能来添加其他信息或进行说明。答案应该是直接解决您问题的帖子。如果您针对自己的问题发布了解决方案，请接受您的解决方案作为正确答案。由于您接受了另一个答案，因此我删除了很多“答案”。
— 蒂姆·波斯特
— 发送方

Answers:

169

您在浏览器中看到什么错误？如果您发布的内容不完整，我可以理解为什么您的代码不起作用，但是却不知道我不确定。

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

...对我来说很好。

编辑：如果它们超出限制，则可能应该清除charNum div或编写一些内容。

— 卡特勒姆
source
1
真？我的id ='charNum'只是一个span而不是div，让我再看一次！
— 凯尔
看到完整的代码后，您期望它做些什么？什么是“破损”？
— 卡特勒姆
您可以删除“ else”，仅因为我们命中500并不意味着我们应防止#charNum显示值，“ else”将使数字停止于1而不是现在的0。
— 约阿基姆
@Joakim，我删除了else，但是在这种情况下，我将得到负数！
— 凯尔
也许只是在if中添加一些内容，将charNum设置为“您已达到限制”，或类似的内容。
— 卡特勒姆
83

基于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');
  }
});
— 基思
source
1
不要使用这个。正如Etienne Martin指出的那样，该解决方案存在缺陷。
— Fabian Bigler
78

The️公认的解决方案有缺陷。

这有两种情况keyup不会触发事件：

  1. 用户将文本拖到文本区域中。
  2. 用户右键单击（上下文菜单）在文本区域中复制粘贴文本。

请改用HTML5 input事件以获得更可靠的解决方案：

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

JavaScript（演示）：

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

如果您绝对想使用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）
source
4
不知道input事件。谢谢
— Abk
一个简单的问题（尚未尝试使用您的代码/方法）是否可以用于语音输入？
— 赛弗（Syfer）'18年
1
@Syfer绝对。
— 艾蒂安·马丁
我会尝试的。我在工作中的一个小型项目需要这样的东西。
— Syfer
当语音同时使用JS和jQuery时，以上代码在iOS中不起作用。有什么想法吗？
— Syfer
9

HTML示例，用在需要计数器的地方，请注意textarea和第二个span的ID的相关性：id="post"<-> id="rem_post"以及保留每个特定textarea所需字符数量的span的标题

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

通常放在</body>模板文件中的JavaScript函数需要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);

});
— 鼠
source
9

这对我来说很好。

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

substring()需要成为substr()。

示例：jsfiddle.net/xqyWV

— 马茨文
source
@MattCurtis：您应该将jsFiddle-demo张贴在原始帖子中（以获得更多赞誉），并使其更具可标记性。我试图编辑您的帖子并粘贴链接，但我的编辑被拒绝。
— Sk8erPeter
您能否发布完整示例。包括您使用过的jquery版本。上面的示例没有用。抱歉！。
— deepcell
@ B4NZ41对我来说很好。还有其他答案可以更好地解决这个问题。
— mattsven 2013年
4

嗯，这与之前所说的并没有什么不同，但这在所有浏览器中都很好用。

这个想法是删除所有超出定义长度的文本。

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

HTM1代码为：

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

我做了以上的结合。它允许暂停文本输入，并允许退格，甚至在退格时也保持计数：

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>

相信我之前的那些海报！！希望这对某人有帮助！

— DJH
source
3

我为此任务创建了自己的jQuery插件，您可以在此处进行尝试：

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

您可以即时创建字符计数器（还可以创建剩余的字符计数器），可以定义是否要剪切文本，可以定义后缀文本，还可以定义短格式及其分隔符。

这是一个示例用法：

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

});

这是插件的代码：

/**
 * 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);
— 彼得
source
如果元素中已经有文本，则在初始加载时不会更新计数器。一个小问题。
— Ravendarksky 2015年
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）
source
2

我想知道如何做同样的事情，并从这里收集所有人的想法，这就是我的想法：

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');
   }
});
— 贝克利
source
1 
$(document).ready(function() {
    var count = $("h1").text().length;
    alert(count);
});

另外，您可以放置​​自己的元素ID或类，而不是“ h1”，并且length事件计数文本区域字符串characters的字符

— 帕勒姆·拉金普尔
source
0

您的代码有点混乱。这是一个干净的版本：

<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>
— 西尔万·吉洛佩
source
狡猾，相信我，这行不通，看来以.. function（）{..开头的函数必须不在$（document）.ready（function（）{
— Kyle
0

试试这个。

<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>
— 哈迪克
source
0

一种更通用的版本，因此您可以将函数用于多个字段。

<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>
— 露米斯
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>

使用以下内容可以跳过使用else的步骤，也可以跳过获得负数的操作。

— 湿婆夏兰
source
0

这是我的例子。晚饭简单 

$(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>
展开摘要

— 伊万·米林西奇（Ivan Milincic）
source
0

我们对任何有针对性的解决方案都不满意。

因此，我们已经在jquery-jeditable的基础上为JQuery创建了一个完整的字符计数器解决方案。这是一个textarea插件扩展，可以双向计数，显示自定义消息，限制字符数并且还支持jquery-datatables。

您可以立即在JSFiddle上对其进行测试。

GitHub链接：https : //github.com/HippotecLTD/realworld_jquery_jeditable_charcount

快速开始

将这些行添加到您的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>

然后：

$("#myTextArea4").charCounter();
— 威登
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）
source
-1

您可以使用： 

    $(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);
   }
  });
 });
— 恶魔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.