Question

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

基本上我想奖励积分。如果他输入50个单词，请说20分。 我希望无论用户输入什么类型的文字都会被着色，但只有50个单词之后，这些文字才会变黑。

表示文字变色，而我输入50个单词并保持相同的颜色，但剩余的单词必须正常

JS

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

Answer 1

以下在Chrome，Firefox，Opera，Safari和IE11（至少）中效果很好。

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

使用-webkit-text-fill-color: transparent;允许textarea在文本不可见时显示光标。这仅适用于webkit浏览器，但它并不会杀死其他浏览器中的功能。在IE中，文本颜色较暗，因为它显示div的文本覆盖在textarea的顶部。

最后，将pointer-events: none;添加到div可让您将鼠标放在其后面的textarea上。

出于代码段的目的，我将字数设置为5而不是50。

<强>段：

＆＃13;

$('textarea').on('input', function() {
  var word = 0,
    lastLetter;

  $('#output > span').text('');
  this.value.split('').forEach(function(letter, i) {
    if (letter === ' ' && lastLetter !== ' ') word++;
    lastLetter = letter;
    if (word < 5) {
      $('#output span:first').append(letter);
    } else {
      $('#output span:last').append(letter);
    }
  });
});

$('textarea').focus();

＆＃13;

textarea,
#output {
  width: 500px;
  height: 10em;
  padding: 0.2em;
  margin: 0.2em;
  box-sizing: border-box;
  font: 13px arial;
  border: 1px solid silver;
  white-space: pre-wrap;
}
textarea {
  -webkit-text-fill-color: transparent;
  overflow: auto;
}
#output {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
#output span:first-of-type {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"><span></span><span></span></div>
<textarea></textarea>

＆＃13;

Answer 2

我猜你至少要使用jQuery。我为你创建了一个小提琴http://jsfiddle.net/fdp1f715/和一个片段:) 这是你想要的吗？

＆＃13;

$(function () {
    $('textarea#foo').on('keyup', function () {
        var content = $(this).val();
        var n = content.split(" ").length; // get number of words 
        $('p#nOfWords').text(n); // print number of words        
        $(this).removeClass('bar');
        if (n > 50) {
            $(this).addClass('bar');
        }
    });
});

＆＃13;

textarea {
    color: black;
}
textarea.bar {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<textarea id="foo"></textarea>
<p id="nOfWords"></p>

＆＃13;

Answer 3

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

$('textarea').on('input', function(){
    $('.output').html(this.value.replace(/(([^\s]+\s*){0,3})(.*?)/, '<span>$1</span>$3'));
});

span {color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>
<textarea></textarea>

Answer 4

是的，你可以这样做。这是一个vanilla javascript解决方案：http://jsfiddle.net/afhmpc4q/2/

<textarea id="area"></textarea>

JS

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;

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

4 个答案: