限制 JQuery 中文本字段的字数

Question

我正在修改一些 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”应该等于什么才能返回当前值？

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

有什么想法吗？

谢谢，斯科特

Answer 1

我不太明白 $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');
    } 
});

Answer 2

这只是对上面的扩展，来自 Pritam 的很好的答案，我发现它的行为很奇怪并且改变了

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

至：

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

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

Answer 3

以下脚本不允许您输入超过 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);
   }
});

Answer 4

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

Answer 5

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

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