Question

所以我有一个最大长度为140的textarea，但我现在想要更改它，以便140之后的任何字符都是红色的（表示这些字符不会被保存）。

我想会有一些javascript / jquery需要，但我不知道从哪里开始。我已经在网上看过，但似乎找不到任何东西。

有什么想法吗？

Answer 1

这是一个起点，使用两个textareas。它需要做更多的工作才能使它完美无缺

$('#textarea2').on({
    focus: function() {
        if (this.value.length >= 20) $('#textarea1').focus();
    },
    keyup: function() {
        if (this.value.length >= 20) $('#textarea1').focus();
        $('#textarea1').val(this.value)
    }
})

FIDDLE

Answer 2

我不会为你编写代码，但我这样做的方法是将输入到textarea的内容动态复制到div，除了textarea之外，还显示给用户，或者使用一些css / javascript，而不是textarea。这就是javascript wysiwyg html编辑器通常的工作原理

然后，您可以使用值的长度在div中的字符周围放置超出所需最大值的范围，并在该范围内放置一个类。

Answer 3

编辑：Evert所描述的Buggy vanilla版本。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #llama {
            opacity: 0;
            z-index: 1;
            font: 14px Verdana, Arial, Helvetica, sans-serif;
            padding: 4px !important;
        }
        #llamallama {
            color: orange;
            z-index: 2;
            word-wrap: break-word;
            font: 14px Verdana, Arial, Helvetica, sans-serif;
            padding: 4px !important;
        }
        .abspos {
            top:10px;
            left:10px;
            position: absolute;
        }
    </style>
</head>
<body>
    <textarea id="llama" class="abspos" cols="30" rows="10"></textarea>
    <div id="llamallama" class="abspos"></div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var $llama      = $('#llama');
            var $llamallama = $('#llamallama');
            $llamallama.width($llama.width());
            $llamallama.height($llama.height());
            $llamallama.on('click', function(){
                $llama.focus();
            });
            $llama.on('keyup', function(){
                if($(this).val().length > 14){
                    cleanText = $(this).val().slice(0, 14);
                    errorText = $(this).val().slice(14, $(this).val().length);
                    errorText = "<span class='error'>" + errorText + "</span";
                    textAreaText = cleanText + errorText;
                    $llamallama.html(textAreaText);
                } else {
                    $llamallama.html($(this).val());
                }
            });
            $llamallama.html($(llama).val());
        });
    </script>
</body>
</html>

Answer 4

试试这个

<html>
      <head>
        <script src="http://code.jquery.com/jquery-1.5.js"></script>
        <script>
          function countChar(val) {
            var len = val.value.length;
            if (len >= 500) {
              val.value = val.value.substring(0, 500);
              val.css{'border','1px solid red';}
            } else {
              $('#charNum').text(500 - len);
              val.css{'border','1px solid black';}
            }
          };
        </script>
      </head>

  <body>
    <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>
  </body>

</html>

Html textarea - maxlength后的颜色字符

4 个答案: