textarea增加字数监听且高度自适应(兼容IE8)

时间:2024-05-02 00:08:32

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