效果
相关HTML
<html><head><title>测试</title><meta charset="utf-8"><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>
///numLimit：字数限制
///isRequired：文本是否必填
function numLimit(numLimit,isRequired) {var text = $("#DJZY").val();var textLength = 0;if (text!="undefined"&&text!=""&&text!=null) {textLength = text.length;}if (isRequired && textLength == 0) {//如果必填，而文本框没内容的话，会有背景颜色$("#DJZY").css('background-color', 'rgb(255,0,0,0.05)');} else {$("#DJZY").css('background-color', '#fff');}$("#DJZYLimit").html(textLength + "/" + numLimit);
}</script></head><body><div><textarea oninput="numLimit(200,true)" id="DJZY" name="" maxlength="200" style="resize;width: 99.5%;height: 80px;resize: none;background-color:rgb(255,0,0,0.05)" placeholder="200字以内"></textarea><span id="DJZYLimit" style="float: right;;position: relative;left: -10px;top: -20px;">0/200</span></div>
</body></html>
