Question

我有一个textarea，其中的内容需要通过字数限制来限制。

<textarea class="user_response"></textarea>

这是我到目前为止的代码。我可以改变整个文本的颜色但是在单词限制之后找不到改变颜色的方法。

$(".user_response").on('keyup', function() {
    var words = this.value.match(/\S+/g).length;
    if (words > gWordLimit) {
        $(this).css("color","red");
    } else
        $(this).css("color","black");               
});

预期结果：如果单词限制为2，则在第二个单词之后，多余字符的颜色应突出显示为红色。

Answer 1

这是更新后的答案：

＆＃13;

$(document).ready(function(){
 $(".user_response").keypress( function() {
    var words = $('.user_response').text().length;
if(words >4)
{
    if(words ==5)
    {
             $(".user_response").attr("contenteditable","false");
                $("#highlite").show();
                $("#highlite").attr("contenteditable","true");
                $("#highlite").focus();
        
                $("#highlite").css("color","red");
                }
            }else
                $("#highlite").css("color","black");  
                });
    $("#highlite").keyup( function() {
    if($("#highlite").text().length <1){
     
     $(".user_response").attr("contenteditable","true");
     $("#highlite").attr("contenteditable","false");
     $("#highlite").hide();
     $(".user_response").focus();
     }      
    });           
});

＆＃13;

div{
 -moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;

}
span{
 outline: 0px solid transparent;
 }

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script>

</script>
</head>
<body>
<div class="user_response" contenteditable="true"><span id=highlite></span> </div>

</body>
</html>

＆＃13;

<强> 注意：的

我已将div和span看作文字区域。根据您的要求更改字数限制。第二个if条件必须大于上一个/

Answer 2

您需要访问textarea的内容。因此，您只能使用contenteditable。

注意：如果您希望稍后使用.input的内容，则需要删除其中的所有span标记。

＆＃13;

$(document).ready(function() {
  // https://stackoverflow.com/a/4220182/4203811 [
  
  //setup before functions
  var typingTimer;              
  var doneTypingInterval = 1000;  
  var input = $('.input');

  //on keyup, start the countdown
  input.on('keyup', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(highlight, doneTypingInterval);
  });

  //on keydown, clear the countdown 
  input.on('keydown', function () {
    clearTimeout(typingTimer);
  });
  
  // ]
  
  // https://stackoverflow.com/a/27622713/4203811 [
  function highlight() {
    var wordArray, lastWords = [], firstParts, length;

    wordArray = input.html().replace(/<\/?span.*?>/g, "").split(/\s+/);

    length = wordArray.length;

    for (var i = 2; i < length; i++) {
      lastWords.push(wordArray.pop());             // pop the last word
    }

    firstParts = wordArray.join(' ');        // rejoin the first words together

    input.html([firstParts, ' <span class="red">', lastWords.reverse().join(' '), '</span>'].join(''));
  };
  
  // ]
});

＆＃13;

body {
  display: flex;
  align-items: center;
  justify-content: center;
}
html, body {
  height: 100%;
  overflow: hidden;
}
div {
  font-family: sans-serif;
}
div > span {
  font-size: 25px;
  color: black;
  display: inline-block;
  background-color: grey;
  padding: 10px;
}
.red {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="input" contenteditable>Content</span>
</div>

＆＃13;

现金：基于Chris Coyier：扩展边界，https://codepen.io/chriscoyier/pen/KyaZVm/

Answer 3

我对这个问题的解决方案是。在文本区域下方使用div。此div将显示用户在文本区域中输入的内容。大于限制的字符将以红色显示，而其他文本将在该区域显示为黑色。以下是代码段。这是工作的jsFiddle https://jsfiddle.net/xhfokb7g/

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span.error {
         color: red;
        }
    </style>
</head>
<body>
    <textarea class="user_response" cols="30" rows="10"></textarea>
    <div id="texty"></div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var txtarea      = $('.user_response');
            var climit = 20;
            var texty = $("#texty");

            txtarea.on('keyup', function(){
                if($(this).val().length > wordslimit){
                    cleanText = $(this).val().slice(0, wordslimit);
                    errorText = $(this).val().slice(wordslimit, $(this).val().length);
                    errorText = "<span class='error'>" + errorText + "</span";
                    textAreaText = cleanText + errorText;
                    texty.html(textAreaText);
                } else {
                    txtarea.html($(this).val());
                }
                texty.html($txtarea.val());
            });
        });
    </script>
</body>
</html>

第n个单词后突出显示

3 个答案: