如何制作像Twitter一样突出显示字符限制的文本区域？

Question

Twitter的“提交推文”文本框突出显示了超出字符数限制的字符：

如您所见，超出字符限制的字符以红色突出显示。 我怎样才能实现这样的目标？

Answer 1

您将在此处找到必要的解决方案和所需的代码：

超过140个限制（即变为负数）时如何插入<em>标签？

...和这里：

REGEX-突出显示超过19个字符的部分

您的问题似乎是重复的。

注意：我没有选择将以上链接发布为评论（即特权取决于信誉）。

这是Simon Kuang推荐的代码（请参阅注释）：

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h3>Your text here</h3>
   <div contenteditable="true" id="myDiv">edit me
  </div>
  <p>
    <h3>Stuff over 19 characters</h3>
  <div id="extra">
  </div>
  <p>
    <h3>Sample output</h3>
    <div id="sample">

  </div>
</body>
</html>

CSS：

.highlight {
 color:red;
}

JavaScript：

$(document).ready(function() {
  $('#myDiv').keyup(function() {
    var content = $('#myDiv').html();
    var extra = content.match(/.{19}(.*)/)[1];

    $('#extra').html(extra);

    var newContent = content.replace(extra, "<span class='highlight'>" + extra + "</span>");
    $('#sample').html(newContent);
  });
});

Answer 2

这是示例，当达到限制时显示警报，然后高亮显示所有输入的字符。

 $(document).ready(function() { var input = $('#text_text'); var warning = $('#warning'); var char_limit = 30; input.on('keyup', function() { var val = $(this).val(); if (val.length > parseInt(char_limit)) { alert("limit reached"); warning.html('hello').css('display', 'block'); l = val.length var input = document.getElementById("text_text"); input.setSelectionRange(char_limit, l); input.focus(); } else { warning.css('display', 'none'); } }); });

 #warning { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test_box"> <textarea name="msg" cols="50" rows="5" id="text_text"></textarea> <div id="warning"></div> </div>

Answer 3

试试这个（模式）

html

<data></data><br />
<textarea maxlength="20" placeholder="20 character limit"></textarea>

js

$(function () {
    $(document).on("keyup", "textarea", function (e) {
        if ($(e.target).val().length >= 20) {
            $("data").text($(e.target).attr("placeholder"))
            .fadeIn(1000).fadeOut(9000);
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/8RScd/

如何制作像Twitter一样突出显示字符限制的文本区域？

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-05-20 00:49:54

HTML：

CSS：

JavaScript：

解决方案2
1 2016-08-21 11:12:59

解决方案3
0 2014-05-20 01:32:47

如何制作像Twitter一样突出显示字符限制的文本区域？

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-05-20 00:49:54

HTML：

CSS：

JavaScript：

解决方案2 1 2016-08-21 11:12:59

解决方案3 0 2014-05-20 01:32:47

解决方案1
3 已采纳 2014-05-20 00:49:54

解决方案2
1 2016-08-21 11:12:59

解决方案3
0 2014-05-20 01:32:47