easyui中的多行文本框字体长度的动态验证-蒲公英云

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

小灰灰 2021-01-20 06:05 954阅读 0赞

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70

使用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框架渲染后的结构如下图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70 1

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");
        }
    })
})