Question

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

问题是我希望过多的字符（单独600以上）在密钥上也会变红。

$(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();
                }
            });
        });

Answer 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>

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

1 个答案: