easyui中的多行文本框字体长度的动态验证

 

使用easyUI的html代码片段如下：

(此处布局用的是table，建议使用div布局，便于后期修改样式)

<tr>
    <td class="vertical-top">活动描述：</td>
    <td class="rel ">
        <input id="ActiveDescribe" class="easyui-textbox text-rows " data-options="multiline:true"   style="height: 100px;"  prompt="请输入活动描述">
        <span  class="abs limitfont">已输入0/300</span>
    </td>
</tr>
<tr>
    <td class="vertical-top">绩效目标：</td>
    <td class="rel ">
        <input id="PerformanceGoal" class="easyui-textbox text-rows " data-options="multiline:true"   style="height: 100px;"  prompt="请输入活动描述">
        <span class="abs limitfont">已输入0/300</span>
    </td>
</tr>

上述代码经过easyui框架渲染后的结构如下图：

js实现代码：

 

$(function(){
    //字数限制在300以内
    $(".textbox-text").on("input",function(){
        console.log(this);
        var num=$(this).val().length;
        if(num<=300){
            $(this).parent().next("span").html("已输入"+num+"/300");
            $(this).parent().next("span").css("color","#ccc");
        }else{
            $(this).parent().next("span").html("已输入"+num+"/300").css("color","red");
        }
    })

})

this代表当前编辑框，不管页面有多少个编辑框用上述一段js都校验字数个数。