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');
    })  
  • 相关阅读:
    PHP实现bitmap算法
    c++高性能web框架drogon入门教程五:实例小项目,web和api实例代码
    c++高性能web框架drogon入门教程四,orm使用,csp使用
    c++高性能web框架 drogon入门教程三 控制器和数据库客户端使用
    c++高性能web框架drogon入门教程二 windows10下安装drogon,配合vscoede搭建开发环境
    关于tiobe编程语言排行榜的开发语言排名有什么实际作用吗?
    Effective C++的50条建议
    php-cli命令行选项
    php调用kafka消息队列
    php调用rabbitmq实现订单消费队列,和延时消费队列
  • 原文地址:https://www.cnblogs.com/myyouzi/p/11732456.html
Copyright © 2011-2022 走看看