textarea限定字数提示效果

　　最近工作中要实现的一个效果是：在textarea中输入字符会提示剩余多少字符可输入。于是马不停蹄的开始查阅资料。

　　HTML代码：

<table>
    <colgroup>
        <col style="width:100px;" />
        <col />
    </colgroup>
    <tr>
        <td>退货说明：<td>
        <td>
            <textarea class="js-show-change" style="width:400px;height:100px;resize:none;"></textarea>　　//resize属性用于禁止改变文本域的大小
            <p>还可以输入<i class="count">200</i>个字</p>
            <p id="showMsg"></p>
        </td>
    </tr>
</table>    

 

　　jQuery代码：

changeLength = function(obj,num){
    $(obj).on("keyup",function(){
       var len = $(obj).val();
       var subLength = num - len.length;
       if(len.length >= num){
           $(obj).siblings(".js-show-length").find(".count").text(0);
           var count = $(".count").val(0);
           if (count) {
              $("#showMsg").html("您输入的字数已经达到上限，无法继续输入了。");
              $(obj).val(len.substr(0,num));　　//输入字数限制
           }
       }else{
           $(obj).siblings(".js-show-length").find(".count").text(subLength);
　　　　　　 $("#showMsg").html("");
       }
    })  
 }
changeLength(".js-change-length",200);

 

　　原文：http://www.w3cfuns.com/notes/14290/5a6b78b3893700055f36b48b44ccb62b.html