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

textarea增加字数监听且高度自适应(兼容IE8)的更多相关文章

  1. 安卓onTextChanged参数解释及实现EditText字数监听 Editable使用

    原作者部分修改部分 补充部分 补充部分2 补充部分3 补充部分4 Editable 尊重原作者:此篇文章是借鉴原作者地址 的博文 并进行修改和增加补充说明,我只是补充和修改: 我感觉这篇文章经过我的补 ...

  2. onTextChanged参数解释及实现EditText字数监听

    http://www.picksomething.cn/?p=34 由于最近做项目要检测EditText中输入的字数长度,从而接触到了Android中EditText的监听接口,TextWatcher ...

  3. Android addTextChangedListener(文本监听)参数解释及实现EditText字数监听

    由于最近做项目要检测EditText中输入的字数长度,从而接触到了Android中EditText的监听接口,TextWatcher.它有三个成员方法,第一个after很简单,这个方法就是在EditT ...

  4. JS监听输入框值变化兼容 onpropertychange、oninput

    onpropertychange 属IE oninput 属除IE外(Chrome.Firefox.SS) 所以肯简单的办法嘛: 1. 一个input里面写两个属性事件 2.写在JS中判断浏览器添加监 ...

  5. JS跨域解决iframe高度自适应(IE8/Firefox/Chrome适用)

    参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...

  6. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  7. js 监听输入框输入事件兼容ie7

    $(element).bind("input propertychange",function(){});

  8. Android增加监听的三种实现方式

    在Android中,为一个按钮增加监听的方式有五种 1.匿名内部类 @Override protected void onCreate(Bundle savedInstanceState) { sup ...

  9. 使用extentreports美化testng报告2,增加监听

    有兴趣研究了extentreports报告美化插件,但是因为发现插件有很多内容不能自定义,所以放弃了这个插件,我扩充了官方代码的demo,在testng中增加了监听,并打印了一些测试用例,现在我把两个 ...

随机推荐

  1. 附009.Kubernetes永久存储之GlusterFS独立部署

    一 前期准备 1.1 基础知识 Heketi提供了一个RESTful管理界面,可以用来管理GlusterFS卷的生命周期.Heketi会动态在集群内选择bricks构建所需的volumes,从而确保数 ...

  2. [机器学习笔记]kNN进邻算法

    K-近邻算法 一.算法概述 (1)采用测量不同特征值之间的距离方法进行分类 优点: 精度高.对异常值不敏感.无数据输入假定. 缺点: 计算复杂度高.空间复杂度高. (2)KNN模型的三个要素 kNN算 ...

  3. 使用不同的C++支持库的模块混合开发时,引发异常展开不正常,抛异常竟引出一个SIGSEGV

    如果你使用gcc对一部分模块进行了GNUMake的编译,这些编译出动态库使用在Gradle编译框架下的项目.那么就有可能出现题目中的情况,使用不同的C++支持库的模块混合开发时,引发异常展开不正常. ...

  4. Redis报错: StackExchange.Redis.RedisServerException: Endpoint 39.105.22.111:7200 serving hashslot 12448 is not reachable at this point of time.

    emmmm……要下班了,简单记录一下. 如果是127.0.0.1:7200报这个错,请移步 https://blog.csdn.net/foreverhot1019/article/details/7 ...

  5. React Native从零开始构建项目(2019)

    环境搭建,参考官网 https://reactnative.cn/ 安装 Xcode Android Studio 目的,实现本地热重载开发,使用vsCode 运行失败,重新执行react-nativ ...

  6. 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU启动那些事(3)- Serial ISP模式(blhost)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Serial ISP模式. 在上一篇文章 Boot配置(ISP Pin, OTP) 里痞子衡为大家 ...

  7. 如何在导航条的button点击变换时,切换对应的控制器

    1.导航条内的button被点击 切换对应的控制器 让控制器作为调航条的代理 1.定义代理 2.遵循代理协议 3.实现代理 4.在合适的地方调用代理    当按钮被点击的时候切换控制器

  8. GO富集分析示例【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  9. 大型情感剧集Selenium:3_元素定位 #华为云·寻找黑马程序员#

    关于昨天的文章 今天有朋友反馈,代码运行的时候,selenium提示警告 DeprecationWarning: use options instead of chrome_options drive ...

  10. 一条数据的HBase之旅,简明HBase入门教程1:开篇

    [摘要] 这是HBase入门系列的第1篇文章,主要介绍HBase当前的项目活跃度以及搜索引擎热度信息,以及一些概况信息,内容基于HBase 2.0 beta2版本.本系列文章既适用于HBase新手,也 ...