使用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都校验字数个数。