计算和限制文本区域中的单词

IT技术 javascript jquery html
2021-02-20 19:43:50

我设法使这个小 jquery 函数来计算在 textarea 字段中输入的单词数。

这是小提琴

这是代码：

查询：

$(document).ready(function()
{
var wordCounts = {};
$("#word_count").keyup(function() {
    var matches = this.value.match(/\b/g);
    wordCounts[this.id] = matches ? matches.length / 2 : 0;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('#display_count').html(finalCount);
    am_cal(finalCount);
}).keyup();
});

这是 html 代码

<textarea name="txtScript" id="word_count" cols="1" rows="1"></textarea>
Total word Count : <span id="display_count">0</span> words.

我如何对其进行修改以获得这样的输出

总字数：0 字。剩余字数：200

当它达到 200 个单词时，它不允许在 jquery 的 textarea 字段中粘贴或键入更多单词？即它应限制用户输入不超过 200 个单词。

请帮忙。

非常感谢。

编辑：仅在此代码中需要修改，因为我非常了解插件，但它们可能会干扰主代码。

6个回答

使用return false到停止keyup的事件不会阻止的情况下，因为在这种情况下，该事件已经被解雇。在执行该键的默认操作后，keyup当用户释放某个键时会触发该事件。

您需要以编程方式编辑textarea您拥有的值#wordcount：

$(document).ready(function() {
  $("#word_count").on('keyup', function() {
    var words = 0;

    if ((this.value.match(/\S+/g)) != null) {
      words = this.value.match(/\S+/g).length;
    }

    if (words > 200) {
      // Split the string on first 200 words and rejoin on spaces
      var trimmed = $(this).val().split(/\s+/, 200).join(" ");
      // Add a space at the end to make sure more typing creates new words
      $(this).val(trimmed + " ");
    }
    else {
      $('#display_count').text(words);
      $('#word_left').text(200-words);
    }
  });
});

http://jsfiddle.net/k8y50bgd/

我的原始答案没有考虑到您的阻止复制粘贴超过 200 次。现在它截断了。我想你会想要做一些 UI 工作来让用户更加了解正在发生的事情。
2021-04-16 19:43:50
是的，很抱歉造成混乱。我已经修复了它，我只是在评论过去版本的答案。
2021-04-27 19:43:50
正在寻找这样的解决方案，而这只是解决了问题。答案是旧的，但仍然成立。+1
2021-05-02 19:43:50
方法？？你有什么建议？
2021-05-03 19:43:50

我会这样做吗？

$("#word_count").on('keydown', function(e) {
    var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0;
    if (words <= 200) {
        $('#display_count').text(words);
        $('#word_left').text(200-words)
    }else{
        if (e.which !== 8) e.preventDefault();
    }
});

小提琴

当超过限制时，它在哪里限制用户？
2021-04-24 19:43:50
好吧，让我检查一下。谢谢 ：）
2021-05-03 19:43:50
@ user2057047 - 我的错，没有注意到，编辑了答案！
2021-05-04 19:43:50

一个简单的插件可以在这里找到：

使用 jQuery 的简单 Textarea 字计数器

我知道互联网上有很多插件，但我不想使用它们，因为只需稍微修改此代码即可。但我想不出同样的问题..因此我在这里发布了这个问题。
2021-04-20 19:43:50
如果插件不合适（或者您无法从上面的示例中提取相关代码），您应该在问题中指定这一点。
2021-04-25 19:43:50

添加一个简单的if condition将解决您的问题。

$.each(wordCounts, function(k, v) {
    if(finalCount <= 200) {
        //Todos
    }
    else {
      return false;  //prevent keyup event
    }
 });
@user1671639return false;不会阻止用户输入。它可以防止 keyup 事件，但该事件会在已释放键且已执行键的默认操作后触发。
2021-05-11 19:43:50

$(document).ready(function(){ $("textarea").on('keyup',function(){

                var value = $('textarea').val();
                var wordCount = 0;

                if(value == ""){
                    $('textarea').empty();
                }
                else{

                    var regex = /\s+/gi;
                    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
                }

                    if(wordCount > 25){
                     var trimmed = $(this).val().split(/\s+/,25).join(" ");
                    $(this).val(trimmed + " ");
            }
            else{
                $('#display_count').html(25- wordCount +" words left");
            }


              });

});

请添加更多关于您的答案的描述和/或信息以及它如何解决所提出的问题，以便其他人无需澄清即可轻松理解
2021-05-11 19:43:50
其它你可能感兴趣的问题
上一篇如何防止在输入字段中输入无效字符 下一篇用javascript修改css规则对象