zoukankan      html  css  js  c++  java
  • textarea增加字数监听且高度自适应(兼容IE8)

    1.封装方法:

    var textareaListener = {
      /*事件监听器兼容
       *
       *attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
       *addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8
       *
       */
      compatibleEvtListener: function () {
        var observe;
        if (window.attachEvent) {
          observe = function (element, event, handler) {
            element.attachEvent('on' + event, handler);
          };
        } else {
          observe = function (element, event, handler) {
            element.addEventListener(event, handler, false);
          };
        }
        return observe
      },
      /*初始化方法
       *
       *params说明:dom-传入的textarea标签,maxLength-允许输入的最大长度,isBottom-textarea标签是否在页面最底部(用于解决在ie浏览器textarea输入内容时,页面滚动条跳动的问题,,如果不在底部出现跳动,这个问题我还没想好~)
       *
       */
      init:
    function (dom, maxLength,isBottom) {     var _this = textareaListener;     var textarea = dom[0];     var strLength = textarea.value.length;     var observe = _this.compatibleEvtListener();     dom.after('<span class="tip" style="font-size:12px;color:#666;position:relative;float:right;margin-top:-27px;"><span class="str">' + strLength + '</span>/' + maxLength + '</span>');     observe(textarea, 'change', resize);     observe(textarea, 'cut', delayedResize);     observe(textarea, 'paste', delayedResize);     observe(textarea, 'drop', delayedResize);     observe(textarea, 'keydown', delayedResize);     resize('init');     function delayedResize(){       window.setTimeout(resize, 0);     }     function resize(isInit) {       textarea.style.height = 'auto';       textarea.style.height = textarea.scrollHeight + 'px';       if (!isInit && isBottom) $(document).scrollTop($(document).height());       if (textarea.value.length > maxLength) {         dom.next('.tip').html('已超过限定字符长度!').css('color', '#c8152d');       } else {         dom.next('.tip').html('<span class="str">' + textarea.value.length + '</span>/' + maxLength + '</span>').css('color', '#666');;       }     }   } }

    2.调用:

    $('textarea').each(function () {
        var _this = $(this);
        textareaListener.init(_this, '10');
    })  
  • 相关阅读:
    == 和 equals 的区别是什么?
    String 类的常用方法都有那些?
    报表工具对比选型系列—多样性数据源支持度
    报表工具选型对比系列
    报表工具选型对比系列
    web 端怎么实现套打发票、快递单等套打票据功能?
    如何集成一个第三方报表,权限怎么控制
    BI 报表工具如何与 springBoot 框架集成
    在报表中可以使用 ECharts 做图形展现吗?
    Tableau 等常见 BI 工具能集成到 java 项目中吗
  • 原文地址:https://www.cnblogs.com/myyouzi/p/11732456.html
Copyright © 2011-2022 走看看