fiddle

Question

我有一个几乎完整的脚本，但我无法在这里弄清楚最后一点。该脚本旨在限制可以输入文本区域的单词数量，如果它们超过单词限制，则删除这些额外单词。我有超出最大标记为超额的单词数量。例如，如果您要输入102个单词，则超出量将为2.如何从文本区域中删除这两个单词？

jQuery(document).ready(function($) {
    var max = 100;
    $('#text').keyup(function(e) {
        if (e.which < 0x20) {
            return;
        }

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

        if (wordCount == max) {
            // Reached max, prevent additional.
            e.preventDefault();
        } else if (wordCount > max) {


            <!--Edited to show code from user3003216-->
            <!--Isn't working like this, textarea doesn't update.-->

            var overage = wordCount - max;
            var words = value.split(' ');
            for(var i = 0; i<overage; i++){
                words.pop();
            }

        }
    });         
});

Answer 1

好吧，最好使用java脚本，所以你去：

var maxWords = 20;
event.rc = true;
var words = event.value.split(" ");
if (words.length>maxWords) {
    app.alert("You may not enter more than " + maxWords + " words in this field.");
    event.rc = false;
}

Answer 2

您可以将以下代码放入else if声明中。

else if (wordCount > max) {
    var overage = wordCount - max;
    var words = value.split(' ');
    for(var i = 0; i<overage; i++){
        words.pop();
    }
}

如果您想从words获取字符串，可以使用join，如下所示：

str = words.join(' ');

Answer 3

解决此问题的最简单方法就是计算keypress上的字数并从那里开始。检查是否有超过允许数量的单词。如果是，请删除所有多余的字词：while (text.length > maxWords)。然后只需用更新的文本替换文本框的值。

fiddle

<强>的JavaScript

var maxWords = 10;
$("#myText").keypress(function (event) {
    var text = $(this).val().split(" ");    // grabs the text and splits it
    while (text.length > maxWords) {        // while more words than maxWords
        event.preventDefault();
        text.pop();    // remove the last word
        // event.preventDefault() isn't absolutely necessary,
        // it just slightly alters the typing;
        // remove it to see the difference
    }
    $(this).val(text.join(" "));    // replace the text with the updated text
})

<强> HTML

<p>Enter no more than 10 words:</p>
<textarea id="myText"></textarea>

<强> CSS

textarea {
    width: 300px;
    height: 100px;     
}

您可以通过将超过maxWords - 在这种情况下10 - 单词粘贴到textarea并按空格键来轻松测试其是否有效。所有额外的单词都将被删除。

Answer 4

jsFiddle Demo

您可以使用val重新评估文本框。数组slice方法允许您从数组中拉出前100个单词。然后用空格加入它们并将它们粘在文本框中。

$(document).ready(function($) {
    var max = 100;

    $('#text').keyup(function(e) {

        if (e.which < 0x20) {
            return;
        }

        var value = $('#text').val();
        var words = value.trim().split(/\s+/gi);
        var wordCount = words.length;

        if (wordCount == max) {
            // Reached max, prevent additional.
            e.preventDefault();
        } else if (wordCount > max) {
            var substring = words.slice(0, max).join(' ');
            $("#text").val(substring + ' ');
        }
    });         
});

Answer 5

虽然您已经接受了答案，但我认为我可能会提供稍微更精致的版本：

function limitWords(max){
    // setting the value of the textarea:
    $(this).val(function(i,v){
    // i: the index of the current element in the collection,
    // v: the current (pre-manipulation) value of the element.

    // splitting the value by sequences of white-space characters,
    // turning it into an Array. Slicing that array taking the first 10 elements,
    // joining these words back together with a single space between them:
        return v.split(/\s+/).slice(0,10).join(' ');
    });
}

$('#demo').on('keyup paste input', limitWords);

JS Fiddle demo

参考文献：

JavaScript的：
jQuery的：
- on()。
- val()。

从文本框中删除多余的单词

5 个答案:

fiddle