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

第一种：顺数

示例代码：

Html

<div class="layui-form-item">
    <div class="layui-input-block" style="margin-left: 0px;">
      <input type="text" id="numberId" name="noticeName" autocomplete="off" placeholder="请输入标题"
        class="layui-input" style="padding-right: 80px;" maxlength="150" required lay-verify="required" />
    </div>
    <span class="layui-form-label" style="position: absolute;right: 10px;top: 74px;width: 55px;">
    	<span id="numbers">0</span>/150
    </span>
</div>

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

演示效果：

第二种：倒数

示例代码：

Html

<div class="layui-input-block" style="margin-left: 0px;">
	<textarea class="layui-textarea" placeholder="请输入内容(500字)" name="noticeDescribe" 
		required lay-verify="required" style="min-height: 140px;max-height: 140px;resize: none" 
		maxlength="500" onkeyup="setLength(this,500,wordsLength);"></textarea>
	<span id="wordsLength" style="position:absolute; right:5px; bottom:1vh; font-size:12px; color:#BDCADA;">0/500</span>
</div>

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

演示效果：

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

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

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