JQuery / JavaScript 字符限制计数器和文本突出显示答案

【问题标题】：JQuery / JavaScript character limit counter and text highlightJQuery / JavaScript 字符限制计数器和文本突出显示
【发布时间】：2015-05-15 16:53:17
【问题描述】：

我正在尝试实现此功能...我有一个最大字符数限制为 600 个的文本区域（不包括数字和符号）和一个计数器（#chars）。当超过字符限制时，发送按钮（.send-message）将被禁用，字符文本计数器（#chars）将变为红色。

问题是我希望过多的字符（仅超过 600 个）在 keyup 上也变成红色。

$(document).ready(function(){
    var char = 600; // Max character limit
        $("#chars").html(char);
        $("#editor").keyup(function () {
            if ($("#editor").text().replace(/[^A-Z]/gi,"").length > char){
                $('.send-message').removeClass('btn-default');
                $('.send-message').addClass('disabled btn-danger');
            }else if($("#editor").text().replace(/[^A-Z]/gi,"").length < 1){
                $('.send-message').removeClass('disabled');
                $('.send-message').addClass('btn-default');
                }
                else if(char <= 600){
                    $('.send-message').removeClass('disabled btn-danger');
                    $('.send-message').addClass('btn-default');
                    $('.send-message').attr('type', 'submit');
                }
            var rest = char - $(this).text().replace(/[^A-Z]/gi,"").length;
                $("#chars").html(rest);

                if (rest <= 100) {
                    $("#chars").css("color", "#f00");
                }
                else {
                    $("#chars").css("color", "#111111");
                }

        $("#excessChars") = $("editor").text().replace(/[^A-Z]/gi,"").length > char);
                if (rest <= 0) {
                    $(rest).css("color", "#f00").text();
                }
            });
        });

【问题讨论】：

能否包含html
是的，你可以@RiteshK

标签： javascript jquery

【解决方案1】：

html

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<style>
textarea {position: absolute; height: 100px; width: 300px; top: 100px; left: 30px;}
#test1 {background: rgba(0,0,0,0); color: red;}
#test2 {background: rgba(0,0,0,0); color: #000;}
</style>
<body> 
  <textarea id="test1"></textarea>
  <textarea id="test2"></textarea>

  <script>
  $(document).ready(function(){
    console.log('here');
    $('#test2').on({
        focus: function() {
        console.log('here');
            if (this.value.length >= 20) {
              $('#test1').focus();
               console.log(this.value.length);
            }
        },
        keyup: function() {
            if (this.value.length >= 20) $('#test1').focus();
            $('#test1').val(this.value); 
        }
    });
  });

  </script>
</body>
</html>

【讨论】：

感谢您的贡献...但这不是问题...我希望 textarea 正文中的文本颜色（多余）变为红色。我已经实现了计数器变成红色了
谢谢.. 我真的很感激
@SowemimoBamidele 进行了更改，我还没有实现按钮逻辑。
@SowemimoBamidele 希望对您有所帮助