Html textarea - maxlength后的颜色字符答案

【问题标题】：Html textarea - color characters after maxlengthHtml textarea - maxlength后的颜色字符
【发布时间】：2014-06-17 01:26:16
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

为什么不使用计数器，一旦达到字符限制然后 textarea 会变成红色？只是一个想法。 Here is a starting point
你不能只改变 textarea 中某些字符的颜色，要么全有，要么全无，所以解决这个问题的唯一方法是使用两个不同颜色的 textarea，并且当达到一定长度时转移焦点，但是会有些复杂，也许一个 contentEditable 元素会更容易。
你有没有尝试过什么？你能和我们分享一下吗？
只需设置 MaxLength，不要尝试重新发明轮子。做一些人们已经熟悉的事情。
没有很好地阅读这个问题。不，您不能部分更改字符。您可以全部更改，也可以不更改。

标签： javascript jquery html

【解决方案1】：

这是一个起点，使用两个文本区域。它需要更多的工作才能使其完美运行

$('#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

【讨论】：

【解决方案2】：

我不打算为你编写代码，但我这样做的方法是将输入到 textarea 中的内容动态复制到一个 div 中，除 textarea 之外，该 div 会显示给用户，或者通过使用一点 css/javascript，而不是 textarea。这就是 javascript 所见即所得 html 编辑器通常的工作方式

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

【讨论】：

嘿，我现在真的很好奇这个代码......为了弄清楚这一点，我将有 2 个元素：1 个文本区域和 1 个 div。他们将被绝对定位（奇怪的措辞哈哈）在彼此之上。文本区域的文本将被隐藏，但在输入时会显示在 div 上。好吧，既然我认为我已经掌握了理论，我将尝试这个:)
@AndrewAllbright 这里是一个快速粗略的实现作为起点jsfiddle.net/Rx77a
查看我对这个问题的更新答案 - 我创建了您所描述内容的非常粗略的实现。您不能在我的版本中突出显示或编辑太多内容，但我现在对 javascript WYSIWYG 编辑器的工作方式有了更好的了解。附言骆驼真棒。

【解决方案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>

【讨论】：

回首往事，我意识到我经历了一个美洲驼阶段。

【解决方案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>

【讨论】：