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');
    })  
  • 相关阅读:
    ASP.Net设计时需要考虑的性能优化问题 转载自http://blog.sina.com.cn/s/blog_3d7bed650100055p.html
    Jqeruy dropdownlist 联动
    Sound Recording in Windows Phone 7
    Windows Phone Performance 系列网址集合
    【xml]: Read XML with Namespace resolution using XLinq.XElement
    编程基础字符篇(2)
    每日总结一:
    每日总结5:
    Control usage: (1) Windows Phone 7: Popup control
    编程基础字符篇(3)
  • 原文地址:https://www.cnblogs.com/myyouzi/p/11732456.html
Copyright © 2011-2022 走看看