在 JQuery 中限制文本字段的字数答案

【问题标题】：Limit Word Count of A Textfield in JQuery在 JQuery 中限制文本字段的字数
【发布时间】：2010-12-07 10:56:29
【问题描述】：

我正在修改一些 jquery 代码来限制文本字段的字数，但我不知道如何获取值。代码如下：

    <script>

var $limitWords = 20;
var $wordCount = $('#count').val();

    $(document).ready(function(){
      $("#edit-field-message-0-value").keyup(function() {
         $('#count').html($('#edit-field-message-0-value').val().split(/\b[\s,\.-:;]*/).length);

      if ($wordCount > $limitWords) {
      $('#edit-field-message-0-value').addClass('error');
      } else {
      $('#edit-field-message-0-value').addClass('not-error');
      }
      });
    });

</script>

具体来说，“$wordCount”应该等于多少才能返回当前值？

我认为这应该很容易，但我似乎无法弄清楚。

有什么想法吗？

谢谢，斯科特

【问题讨论】：

从 SO 的 cmets 借代码 ;)

标签： jquery word-count

【解决方案1】：

以下脚本不允许您输入超过limitWord：

var limitWord = 20;
var maxchars = 0;
$("#edit-field-message-0-value").keyup(function() {
   $this = $(this);
   var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length - 1;
   if (wordcount < limitWord) {
      chars = $this.val().length;
    }
   else{
    var text = $(this).val();
    var new_text = text.substr(0,chars);
    $(this).val(new_text);
   }
});

【讨论】：

【解决方案2】：

我不太了解 $wordCount 变量。我相信您可能正在尝试执行以下操作：

$("#edit-field-message-0-value").keyup(function() {
    var $this = $(this);
    var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;

    if (wordcount > $limitWords) {
        $this.addClass('error');
    } else {
        $this.addClass('not-error');
    } 
});

我还假设您想存储当前计数：

$("#edit-field-message-0-value").keyup(function() {
    var $this = $(this);
    var wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > $limitWords) {
        $('#count').html($limitWords);
        $this.addClass('error');
    } else {
        $('#count').html(wordcount);
        $this.addClass('not-error');
    } 
});

【讨论】：

我无法同时标记您的答案和 Russ Cam 的答案，但感谢您为我指出这一点。基本上，我需要创建一个事件处理程序来定义 wordcount 变量。
这里的空格被当作一个单词。因此改变了字数的概念

【解决方案3】：

这只是对上述内容的扩展，来自 Pritam 的出色回答，我发现它的行为很奇怪并发生了变化

var wordcount = $this.val().split(/\b[\s,.-:;]*/).length - 1;

收件人：

var wordcount = jQuery.trim($this.val()).split(/\b[\s,.-:;]*/).length;

这会对古怪的字数统计行为进行排序（如果您将值显示给用户以获取反馈）

【讨论】：

【解决方案4】：

由于我们不知道“#count”元素是什么，我从使用 html(...) 设置值的方法中取出队列。所以，这应该工作：

var $wordCount = $('#count').html();

【讨论】：

【解决方案5】：

如果我对您的理解正确，您需要将代码放入输入/文本区域的事件处理程序中，例如在按键事件的事件处理程序中。通过这种方式，您可以在用户将文本输入到输入/文本区域时限制字数。

【讨论】：

我无法将您的答案和 cballou 答案都标记为正确，但感谢您为我指出这一点。基本上，我需要创建一个事件处理程序来定义 wordcount 变量——cballou 的答案有一个例子。从那以后就完美了。谢谢拉斯卡姆！