一分一毛也是爱

微信

微信

支付宝

支付宝

观海听潮

观海听潮博客

登录
还没有账号?去注册
观海听潮

观海听潮博客

注册
  • 欢迎来自美国弗吉尼亚州的访客,您好!
×

我的名片

网名:观海听潮

职业:PHP开发工程师

现居:山东省-青岛市

Email:1256699215@qq.com

网站统计

  • 观海听潮•博客
  • 54篇
  • 145条
  • 20435次
  • 196次
  • 美国弗吉尼亚州

您现在的位置是:首页  > 技术杂谈  > 前端 前端

观海听潮

layui textarea 文本长度限制及统计字数样式分享

摘要
layui 普通文本框textarea 统计文本长度以及限制文本长度的方法

示例效果图:

7a7348fd4c7483bec689ad42ee7a47e7994357.jpg

css部分:

.layui-input-block {

        positionrelative;

    }


    .word {

        positionabsolute;

        right10px;

        bottom10px;

        color#aaa;

        font-size12px;

    }

html部分:

<div class="layui-form">

<div class="layui-form-item">

        <label class="layui-form-label layui-required">消息简介:</label>

        <div class="layui-input-block">

            <textarea placeholder="请输入消息简介" oninput="wordLeg(this);" maxlength="100" onpropertychange="if(value.length>100) value=value.substr(0,100)" name="desc" class="layui-textarea"></textarea>

            <div class="word"><span class="text_count">0</span>&nbsp;/&nbsp;<span class="num_count" id="numCount">100</span></div>

        </div>

    </div>

</div>

js部分:

//字数限制

window.wordLeg = function (obj) {

      var currleg = $(obj).val().length;

      var length = $(obj).attr('maxlength');

      if (currleg > length) {

           layer.msg('字数请在' + length + '字以内');

        } else {

           $('.text_count').text(currleg);

       }

 }


讨厌 (0)
微博logo QQ空间logo QQlogo 豆瓣logo 人人logo 百度贴吧logo 有道云笔记logo

文章评论

表情表情
×
图片图片

评论列表