SOURCE

layui.use(['form'], function() {
  var form = layui.form;
  count = function(e) {
    if (!e) return this; //当前div对象不存在，则返回本身
    var r; //当前input 或 textarea 对象
    e.get ? r = e.get(0) : (r = e, e = $(e)); //如果div获取有对象 ，则 获取第一个，否则div就是input 对象，div转换成Jqueyr 对象
    var a = r.tagName.toLowerCase(); //当前对象标签名转小写
    if ("input" != a && "textarea" != a) return this; //如果不等于输入框与文本域，则返回对象本身
    var i = e.attr("minlength") || 0,
    //最大长度||初始值为0
    n = r.maxlength || e.attr("maxlength"); //最大长度||最大长度(字符串类型)
    if (!i && !n) return this; //如果最大长度非空与字符串类型最大长度非空 返回对象本身
    n = n.replace(/\D/g, ""); //正则\d 匹配一个数字字符，替换为空
    var o, l, s = "ui-" + a,
    //类名ui-textarea
    u = s + "-x",
    //类名ui-textarea-x
    d = s + "-count"; //类名ui-textarea-count
    if (e.hasClass(s)) return this; //如果对象存在 ui-textarea 则返回对象本身
    if (0 == e.parent("." + u).length) return this; //父元素筛选是否匹配统计类 .ui-textarea-x 的长度如果等于0（不存在），则返回本身
    var c = r.id; //唯一标识
    c || (c = "id" + (Math.random() + "").replace(/\D/g, ""), r.id = c),
    //唯一标识||不存在则随机生成唯一标识并赋值给对象id
    // 父元素筛选是否匹配统计类 .ui-textarea-count的长度 等于null,则lable创建 元素，否则就更新lable元素的id
    0 == (o = e.parent().find("." + d)).length ? (o = $('<label for="' + c + '" class="ui-' + a + '-count">                        <span>' + i + "</span>/<span>" + n + "</span>                    </label>"), e.parent().append(o)) : o.attr("for", c),
    l = o.find("span").eq(0); //筛选第一个span统计 元素
    var h = function() {
      var e = getLength(r); //textarea 获取中文长度
      l.html(e),
      //写入span统计长度
      e > n ? l.addClass("red") : l.removeClass("red") //如果当前长度大于文本域最大长度，则添加红色样式，否则移除夯实样式
    };
    //返回存在 数据计算，否则div存在，则绑定输入事件，否则绑定键盘事件 
    return e.data("countBind") || ("oninput" in document.createElement("div") ? e.bind("input", function() {
      h()
    }) : r.attachEvent("onpropertychange", function(t) {
      t && "value" == t.propertyName && h()
    }), e.data("countBind", !0)),
    h(),
    this
  },

  getLength = function(e, r) {
    if ("password" == e.type) return r || e.value.length;
    var a = e.getAttribute("lang"),
    i = $.trim(e.value);
    if (!a) return r || i.length;
    if ("" == i) return 0;
    var n = 1,
    o = 1;
    if (/zh/i.test(a) ? o = .5 : /en/i.test(a) && (n = 2), r) {
      var l = 0,
      s = r;
      return t.each(i.split(""), function(t, e) {
        l >= r || (/[\x00-\xff]/.test(e) ? l += o: l += n, l >= r && (s = t + 1))
      }),
      s
    }
    var u = i.replace(/[\x00-\xff]/g, "").length,
    d = i.length - u;
    return Math.ceil(d * o) + Math.ceil(u * n)
  }

  countInput = function() {
    $("#materialSupply").find(".ui-input-x > input, .ui-textarea-x > textarea").each(function() {
      var e = $(this),
      r = e.attr("maxlength");
      if (r) try {
        e.attr("maxlength", "_" + r + "_")
      } catch(a) {
        e.removeAttr("maxlength")[0].maxlength = r
      }
      count(e)
    })
  }
  countInput();

})

<!--功能源码来源
https://my.qidian.com/setting

https://qidian.gtimg.com/c/=/qdp/js/lulu/ui/Validate.0.10.js,/qdp/js/lulu/ui/Select.0.7.js,/qdp/js/lulu/ui/Radio.0.6.js,/qdp/js/lulu/ui/Checkbox.0.6.js,/qdp/js/lulu/ui/Placeholder.0.5.js-->
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          设置我的信息
        </div>
        <div class="layui-card-body" pad15>
          <form class="layui-form" lay-filter="materialSupply" id="materialSupply">
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">
                备注
              </label>
              <div class="layui-input-block  ui-textarea-x">
                <textarea id="forIntroArea" name="description" maxlength="_140_" placeholder="可以简单的描述自己"
                class="layui-textarea">
                </textarea>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

.ui-textarea-x {
  position: relative;
  overflow: hidden;
  padding: 2px 9px 32px 3px;
}

.ui-textarea-x>.textarea,
.ui-textarea-x>textarea {
  font-size: 14px;
  line-height: 20px;
  position: relative;
  z-index: 1;
  right: -6px;
  display: block;
  overflow: auto;
  width: 100%;
  padding: 7px 0 9px;
  resize: none;
  word-break: break-all;
  color: #3e3d43;
  border: 0 none;
  outline: 0;
  background: 0 0;
}

.ui-textarea-x>.ui-textarea {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: border-color .15s, background-color .15s;
  transition: border-color .15s, background-color .15s;
  border: 1px solid #e0deda;
  background-color: #fff;
}

.ui-textarea-count {
  font-size: 12px;
  line-height: 32px;
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 0;
  left: 8px;
  text-align: right;
  color: #a6a6a6;
}

.red {
  color: #bf2c24;
}