Javascript 键入时将文本颜色设置为某个固定限制

我有一个文本区。我没有使用任何插件或API。实现了当我输入时计数增加/减少的字数

基本上我想奖励分数。如果他输入50个单词，说20分。 我希望无论用户键入什么，文本都会被着色，但只有在50个字之后，文本本身才可以是黑色的

意思是文本在我打字时变为彩色，直到50个单词，并且保持相同的颜色，但剩余的单词必须是正常的

JS

$('#content').keyup(function(){
    var wordCount = $(this).val().split(' ').length;
    if(wordCount <= 50){
        $(this).css('color', 'green');
    }
});

$（'#content'）.keyup（函数（）{
var wordCount=$（this.val（）.split（“”）.length；
如果（wordCount我想你至少在使用jQuery。
我为你制作了一把小提琴和一个片段：）
这是你想要的吗


$（函数（）{
$（'textarea#foo'）。on（'keyup'，function（）{
var content=$（this.val（）；
var n=content.split（“”.length；//获取字数
$（'p#nOfWords'）.text（n）；//打印字数
$（this.removeClass（'bar'）；
如果（n>50）{
$（this.addClass（'bar'）；
}
});
})；
textarea{
颜色：黑色；
}
textarea.bar{
颜色：红色；
}

我猜您至少在使用jQuery。
我为你制作了一把小提琴和一个片段：）
这是你想要的吗


$（函数（）{
$（'textarea#foo'）。on（'keyup'，function（）{
var content=$（this.val（）；
var n=content.split（“”.length；//获取字数
$（'p#nOfWords'）.text（n）；//打印字数
$（this.removeClass（'bar'）；
如果（n>50）{
$（this.addClass（'bar'）；
}
});
})；
textarea{
颜色：黑色；
}
textarea.bar{
颜色：红色；
}

是的，您可以这样做。下面是一个普通的javascript解决方案：

是的，你可以这样做。这里有一个普通的javascript解决方案：

您可以用包含前50个单词的内容替换内容。这意味着它必须位于输入字段之外。无论如何，我的建议是这样的（注意，出于演示目的，我的演示限制为3个单词。将
{0,3}
更改为
{0,50}
50）：


$（'textarea'）。在（'input'，function（）上{
$（'.output'）.html（this.value.replace（/（[^\s]+\s*）{0,3}）（.*？/，'$1$3'））；
})；
span{color:green}
您可以用包含前50个单词的内容替换内容。这意味着它必须位于输入字段之外。无论如何，我的尝试是这样的（请注意，出于演示目的，我的演示限制为3个单词。将
{0,3}
更改为
{0,50}
50）：


$（'textarea'）。在（'input'，function（）上{
$（'.output'）.html（this.value.replace（/（[^\s]+\s*）{0,3}）（.*？/，'$1$3'））；
})；
span{color:green}
以下功能在Chrome、Firefox、Opera、Safari和IE11（至少）中运行良好

它将
div
覆盖在
textarea
上，确保两个元素具有相同的CSS。许多CSS属性对于实现这一点非常重要，尤其是
word wrap:pre wrap
，它允许
div
正确处理多个空格

使用
-webkit text-fill-color:transparent；
允许
textarea
显示光标，同时使其文本不可见。这仅适用于webkit浏览器，但不会破坏其他浏览器中的功能。在IE中，文本只是更暗，因为它显示了覆盖在
t上方的
div
文本外部区域

最后，将
指针事件：none；
添加到
div
允许您将鼠标定位在它后面的
文本区域

出于代码片段的目的，我将单词计数设置为5，而不是50

片段：


$（'textarea'）。在（'input'，function（）上{
var word=0，
最后一封信；
$（'#output>span'）。文本（''）；
this.value.split（“”）.forEach（函数（字母，i）{
如果（字母==''&&lastLetter！=''）word++；
lastLetter=字母；
如果（单词<5）{
$（“#输出范围：第一个”）。追加（字母）；
}否则{
$（“#输出范围：最后一个”）。追加（字母）；
}
});
});
$（'textarea'）.focus（）；
textarea，
#输出{
宽度：500px；
高度：10公分；
填充：0.2米；
边缘：0.2米；
框大小：边框框；
字体：13px arial；
边框：1px纯银；
空白：预包装；
}
文本区{
-webkit文本填充颜色：透明；
溢出：自动；
}
#输出{
位置：绝对位置；
指针事件：无；
z指数：1；
}
#输出范围：类型的第一个{
颜色：绿色；
}
以下功能在Chrome、Firefox、Opera、Safari和IE11（至少）中运行良好

它将
div
覆盖在
textarea
上，确保两个元素具有相同的CSS。许多CSS属性对于实现这一点非常重要，尤其是
word wrap:pre wrap
，它允许
div
正确处理多个空格

使用
-webkit text-fill-color:transparent；
允许
textarea
显示光标，同时使其文本不可见。这仅适用于webkit浏览器，但不会破坏其他浏览器中的功能。在IE中，文本只是更暗，因为它显示了覆盖在
t上方的
div
文本外部区域

最后，将
指针事件：none；
添加到
div
允许您将鼠标定位在它后面的
文本区域

出于代码片段的目的，我将单词计数设置为5，而不是50

片段：


$（'textarea'）。在（'input'，function（）上{
var word=0，
最后一封信；
$（'#output>span'）。文本（''）；
这是价值分割(
<textarea id="area"></textarea>

var checktext = {
    "check": function () {
        var words = this.value.match(/\S+/g).length;
        if (words > 10) {
            this.style.color = "red";
            alert("over limit");
        }
    }
};

var areatocheck = document.getElementById("area");
areatocheck.onkeyup = checktext.check;