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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70][]

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

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

上述代码经过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");
            }
        })
    
    })

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70]: /images/1611122717849.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTczNjQw_size_16_color_FFFFFF_t_70 1]: /images/1611122696206.png