• 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');
    })  
  • 相关阅读:
    Luogu P5030 长脖子鹿放置(网络流)
    BZOJ3037 创世纪(基环树DP)
    LuoguP1240 诸侯安置
    LuoguP3128 [USACO15DEC]最大流Max Flow (树上差分)
    总结-一本通提高篇&算竞进阶记录
    LuoguP5022 旅行 (割点,基环树)
    $tsinsenA1067$
    $SCOJ4427 Miss Zhao's Graph$
    $Edmonds-Karp$[网络流]
    $AC自动机$
  • 原文地址:https://www.cnblogs.com/myyouzi/p/11732456.html
Copyright © 2020-2023  润新知