textarea文字限制,使用了JQ实现了textarea的文字数量的限制,兼容IE7及以上

浏览: 222次 日期:2017年12月25日 21:41:19 作者:青格勒

textarea有时候需要进行文字数量的限制,但是有时候照顾很多的浏览器(对,就是IE浏览器,说的就是你)必须使用js来做一个判断,这样对于用户的体验是很高的,这次我花费点时间使用jq做了一个textraea文字数量限制的效果,可以支持页面多个textraea文字数量限制,经过测试我写的代码可以兼容到IE7及以上,也兼容主流浏览器。

 

textraea文字数量代码当页面加载完之后会执行一遍,文字有变化的时候也会执行,写代码的时候充分考虑了各种正常情况下不会出现问题(浏览者是正常浏览不使用暴力插件和暴力手段)。

 

注意事项:

1、textarea的自定义属性data-text-max是控制textarea最大文字限制的,只要把文字限制的数字写在里面就可以了。

2、class=”cgl_text_box”是最外面的容器,最好不要修改,这个也是多个textarea的情况下遍历的元素。

3、class=”cgl_text_no”是给剩余文字数量的容器的,也不要修改,标签可以随便选一个就可以。

4、class=”cgl_text_top”和class=”cgl_text_bot”两个class可有可无,这个就随便了。

5、JQ版本需要高于1.6以上

6、浏览器兼容IE7及以上,主流浏览器都没问题(注意一下JQ版本对IE浏览器的兼容)

 

 

点击下方的运行按钮,可以在线运行。

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div class="cgl_text_box">
    <div class="cgl_text_top"><textarea>CGLweb前端 cenggel.com</textarea></div>
    <div class="cgl_text_bot">你还可以输入<span class="cgl_text_no" data-text-max="100"></span>字</div>
</div>
<div class="cgl_text_box">
    <div class="cgl_text_top"><textarea>CGLweb前端 cenggel.com</textarea></div>
    <div class="cgl_text_bot">你还可以输入<span class="cgl_text_no" data-text-max="50"></span>字</div>
</div>
<script type="text/javascript">
    (function ($) {
        /**
         * JQ用得到的class为:cgl_text_box / cgl_text_no   其他的随意修改
         * JQ用得到的data-为:data-text-max   其他的随意修改
         * 兼容:IE7及以上、主流浏览器
         * JQ版本:1.X  2.X  3.X
         * 博客链接:http://cenggel.com/
         * */
        function cgl_text_fn(cgl_text_this) {
            var cgl_text_len = cgl_text_this.val().length;//获取输入文字的长度
            var cgl_text_max = cgl_text_this.parents('.cgl_text_box').find('.cgl_text_no').attr('data-text-max');//获取最长输入文字长度
            var cgl_text_now  = cgl_text_max - cgl_text_len;//剩余输入文字的长度
            $cgl_text_show = cgl_text_this.parents('.cgl_text_box').find('.cgl_text_no');//数字显示的容器   PS:注意一下parents和parent的使用
            if (cgl_text_len > cgl_text_max) {
                //文字内容大于最大值时,大于最大值后面的文字删除,计算数值变成0
                $cgl_text_show.text('0');
                var cgl_text = cgl_text_this.val().substring(0, cgl_text_max);
                cgl_text_this.val(cgl_text);
            } else {
                //文字内容小于等于最大值时正常计算文字长度
                $cgl_text_show.text(cgl_text_now);
            };
        };
        $('.cgl_text_box textarea').each(function () {
            //初始化-页面加载执行
            cgl_text_fn($(this))
        });
        $('.cgl_text_box').on('keyup mousedown mouseup focus blur ready','textarea',function(){//监听事件多点,主要针对鼠标粘贴复制和兼容
            //执行-事件绑定执行
            cgl_text_fn($(this))
        });
    })(jQuery);
</script>
<style type="text/css">
    body{ width:50%; margin:30px auto;}
    .cgl_text_box{ width:100%; padding-bottom:40px;}
    .cgl_text_box textarea{ display:block; height:150px; width:100%; font-size:16px; line-height:30px;}
</style>

文章链接:http://cenggel.com/js/27.html

版权声明:文章《textarea文字限制,使用了JQ实现了textarea的文字数量的限制,兼容IE7及以上》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注