由于限制字数是用原有的 maxlength会有问题，所以用一般会用js控制，今天用到三种：
（一）html:
<body> <form name=myform action=""> <textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,30);" onKeyUp="textCounter(message,remLen,30);"></textarea> 您还可以输入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">个字符 </form> </body>
js:
function textCounter(field, countfield, maxlimit) { // 函数，3个参数，表单名字，表单域元素名，限制字符； if (field.value.length > maxlimit) //如果元素区字符数大于最大字符数，按照最大字符数截断； field.value = field.value.substring(0, maxlimit); else //在记数区文本框内显示剩余的字符数； countfield.value = maxlimit - field.value.length; }
(二)控件 html:
<div> <textarea id="txtContent" cols="60" rows="10"></textarea> </div>
js:
<script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="Js/maxlength.js"></script> <script type="text/javascript" src="Js/jquery.maxlength-min.js"></script> <script type="text/javascript"> $(document).ready(function (e) { $('#txtContent').maxlength( { maxCharacters: 50, //限制字符数 status: true, //是否开启字数提示 statusClass: 'tip', //提示框的样式 notificationClass: 'notification', //超出限制时文本框的样式 showAlert: false, //超出限制时是否弹出提示框 alertText: '最多只能输入20个字符', //超出限制时弹出框的提示文字 slider:true //提示幻灯效果 } ); }); </script>
css:
1 <style type="text/css"> 2 .notification 3 { 4 border: 3px solid #D55B5B; 5 background-color: #FFCDCD; 6 padding: 5px; 7 } 8 .tip 9 { 10 color: #00A8C6; 11 padding-left:2px; 12 } 13 </style>
（三）html:
1 <div class="textarea_con"> 2 <textarea class="con_text"></textarea> 3 <p class="left_words">您还可以输入<span class="left_words_num">150</span>个字</p> 4 <span class="icons-s icon-tip form-error"></span> 5 </div>
css:
1 .con_text{width: 500px;height: 145px;padding: 10px;color : #555;font-size: 14px;line-height: 20px;border: 1px solid #ccc;resize: none;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;} 2 .textarea_con{position: relative;} 3 .textarea_con .form-error{left: 83px;} 4 .left_words{position: absolute;bottom:20px;right: 60px;color: #d1d1d1;line-height: 1;}
js：
/* 计算剩余字 */ var total = 150; $('.con_text').on('change keydown keyup',function(){ var input_val = $(this).val(); var cur_length = input_val.length; if (cur_length >total) //如果元素区字符数大于最大字符数，按照最大字符数截断； $(this).val(input_val.substring(0, total)); else $('.left_words_num').text(total - cur_length); });