layui表单——监听文本框/域可输入的字数

雨点打透心脏的1/2处 2022-11-29 13:08 1342阅读 0赞

## 第一种：顺数 ##

**示例代码：**

**Html**

**js**

//监听input文本可输入字数
    $("#numberId").on("input",function(e){ 
        //获取input输入的值
        if(e.delegateTarget.value.length<=150){ 
        	var show = document.getElementById("numbers");
            show.innerHTML = Math.floor(e.delegateTarget.value.length);
        }
        if(e.delegateTarget.value.length>=150){ 
        	$('#numbers').attr("style","color:red");
        }else{ 
        	$('#numbers').removeAttr("style","color:red");
        }
    });

**演示效果：**

![在这里插入图片描述][20200821154158840.gif_pic_center]

## 第二种：倒数 ##

**示例代码：**

**Html**

**js**

//文本域字数监听(新增)
    function setLength(obj,maxlength,id){ 
        var num=maxlength-obj.value.length;
        var leng=id;
        if(num<0){ 
            num=0;
        }
        document.getElementById(leng).innerHTML=num+"/500";
    }

**演示效果：**

![在这里插入图片描述][20200821154310559.gif_pic_center]

**注意：**  
  前面演示的都是新增时的监听字数，如果你是用到回显数据时，则需要获取文本框/域的内容长度（即字数），然后赋值给显示字数的那个标签。如果你不进行这步操作（排除事件的自动加载方式，那样做不太友好），则需要手动点击文本框/域才会更新显示对应的可输入字数。

正确做法：在你回显的方法中，获取对应文本框/域的长度。  
**具体代码：**

var noticeName=$("#inputId").val();
    //设置公告标题的输入字数
    var show = document.getElementById("numbers");
    show.innerHTML = Math.floor(noticeName.length);//获取长度赋值给show

//第一种方式（直接获取文本框/域的长度）
    var noticeDescribe=$("#describeId").val();
    //设置公告内容的输入字数
    var showTwo = document.getElementById("wordsLengthEdit");
    showTwo.innerHTML = 500-Math.floor(noticeDescribe.length)+"/500";
    
    //第二种方式（获取回显数据源data的字段长度）
    //回填文本域内容字数
    var len=500-data[0].字段名.length;				
    $("#显示字数的标签id").text(len+"/500");

[20200821154158840.gif_pic_center]: /images/20221124/a218965fce384a56bd6f66cc671ae02f.png
[20200821154310559.gif_pic_center]: /images/20221124/196c5164f7aa414794b183e00217498e.png