使用 Javascript 限制 Words 中文本区域的长度？答案

【问题标题】：Limit length of textarea in Words using Javascript?使用 Javascript 限制 Words 中文本区域的长度？
【发布时间】：2012-10-01 15:37:45
【问题描述】：

我在 keyup 上有以下绑定，如果超过 150 个字符会发出警报，但您可以按 OK 并继续输入，然后继续按 OK。

我想将它们裁剪为 150 个单词（不是字符），如果他们在上面输入，请删除额外内容。但我似乎无法弄清楚该怎么做，我可以弄清楚字符。但不是文字。

jQuery('textarea').keyup(function() {
      var $this, wordcount;
      $this = $(this);
      wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
      if (wordcount > 150) {
        jQuery(".word_count span").text("150");
        return alert("You've reached the maximum allowed words.");
      } else {
        return jQuery(".word_count span").text(wordcount);
      }
    });

【问题讨论】：

不要单独依赖keyup/down。还要考虑用户执行右键单击 -> 粘贴或文本拖放等的情况。谷歌搜索“jQuery textchanged 事件”，你会发现需要什么。
那我应该依靠什么？右键粘贴触发一个键...我不知道什么是文本拖放。
更正，在 Windows IE 剪切/粘贴上的测试没有触发键。我把它改成zurb.com/playground/jquery-text-change-custom-event
如果我达到你强加的限制，我_would_just_start_not_using_spaces_And_I_will_get_my_say_in_no_propblem
Elias，是的，我知道它有问题，这就是为什么我不 100% 依赖 javascript，也有服务器端。但我仍然想在 X 字处裁剪它，并且必须使用 javascript。

标签： javascript jquery textarea

【解决方案1】：

/**
 * jQuery.textareaCounter
 * Version 1.0
 * Copyright (c) 2011 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/20/2011
**/
(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 100
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.keyup(function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = $.trim(text).split(" ").length;
                }
                if(wordcount > options.limit) {
                    $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    $("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);

加载它，然后您可以使用以下方法使其工作：

$("textarea").textareaCounter({ limit: 100 });

http://bavotasan.com/2011/simple-textarea-word-counter-jquery-plugin/

【讨论】：

不知道为什么这被否决了，但这似乎是唯一有效的。
谢谢，这对我有用，但是当用于多个 textarea 元素时，需要为每个字数标签添加唯一的 ID，例如cntid=obj.attr('id')+"-counter_label"，这个会得到每个textarea的id，用来定义counter标签的id。

【解决方案2】：

如果您想阻止输入本身（当计数 > 150 时），您可以执行以下操作：

使用 keypress 而不是 keyup
先不是return alert()，而是alert()，然后是return false;

您可能还想添加更改（或模糊）事件处理程序来处理文本粘贴。

var maxWords = 150;
jQuery('textarea').keypress(function() {
    var $this, wordcount;
    $this = $(this);
    wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
    if (wordcount > maxWords) {
        jQuery(".word_count span").text("" + maxWords);
        alert("You've reached the maximum allowed words.");
        return false;
    } else {
        return jQuery(".word_count span").text(wordcount);
    }
});

jQuery('textarea').change(function() {
    var words = $(this).val().split(/\b[\s,\.-:;]*/);
    if (words.length > maxWords) {
        words.splice(maxWords);
        $(this).val(words.join(""));
        alert("You've reached the maximum allowed words. Extra words removed.");
    }
});

Fiddle here

【讨论】：

第一个有效，第二个无效。如果您将其更改为在粘贴时绑定，则会删除多余的单词，但所有空格也会被删除。
我会给你接受的问题，因为第一个例子解决了我的问题。 第二个例子并没有发挥应有的作用，只是给其他人的一个注释。

【解决方案3】：

检查jQuery: Count words in real time 这个例子：http://jsfiddle.net/gilly3/YJVPZ/1/

那么，如果你想删掉多余的词......你可以这样做：

var maxWords = 10;
if(finalCount > maxWords){
    $("#a").val(a.value.slice(0,-2)); // the -2 is to remove the extra space at the end
};

这是一个工作示例http://jsfiddle.net/YJVPZ/80/

希望对你有帮助，祝你好运！

【讨论】：

如果您继续尝试输入，它会添加部分单词并继续输入。所以基本上是行不通的。
¿?... 无法重现您提到的问题，而不是在 CR、FF 或 IE 中。如果我继续输入，脚本会删除多余的单词和尾随空格......也许你会说，如果你继续在最后一个单词旁边输入，添加所有字母并将其放在一起。如果这是你说的，那很正常，因为考虑是一个词。反正……没关系。

【解决方案4】：

试试这个功能。 value 参数应该是您的 textarea 值。

jQuery('textarea').val();


function wordcount(value)
{
    value = value.replace(/\s+/g," ");
    var andchr = value.split(" & ").length - 1;
    var char_count = value.length;
    var fullStr = value + " ";                      

    //word count for regional language
    v = value.split(' ');
    var word_count1 = v.length;                         
    var cheArr = Array('@','.','"',"'",'_','-','+','=',';','&','*','\(','\)','{','}','[','}','|','\\','\,','/');                            
    for(i=0; i<=cheArr.length; i++)
    {
        word_count1 = word_count1 + value.split(cheArr[i]).length - 1;
    } 

    //word count for all languages
    var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
    var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");                     
    var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;

    var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");                      
    var splitString = cleanedStr.split(" ");                        
    var word_count = (splitString.length - 1) + andchr;                          
    if(word_count1 > word_count)
    {
        word_count = word_count1;
    }                       
    if(value == '' || value == null || typeof(value) == 'undefined'){
        word_count = 0;
    }

    alert(word_count);

}

【讨论】：

这和我的原始代码有同样的问题（没有裁剪额外的字符）

【解决方案5】：

$("textarea").keyup(function(){
         var obj = $(this);
         var maxLen = 150;
         var val = obj.val();
         var chars = val.length;
         if(chars > maxLen){
              obj.val(val.substring(0,maxLen));
         }
});

【讨论】：

裁剪为 150 个字符，而不是 150 个字。

【解决方案6】：

报名参加这些活动：

$('textarea').on('paste cut keydown', function(){...});

【讨论】：