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');
})
textarea增加字数监听且高度自适应(兼容IE8)的更多相关文章
- 安卓onTextChanged参数解释及实现EditText字数监听 Editable使用
原作者部分修改部分 补充部分 补充部分2 补充部分3 补充部分4 Editable 尊重原作者:此篇文章是借鉴原作者地址 的博文 并进行修改和增加补充说明,我只是补充和修改: 我感觉这篇文章经过我的补 ...
- onTextChanged参数解释及实现EditText字数监听
http://www.picksomething.cn/?p=34 由于最近做项目要检测EditText中输入的字数长度,从而接触到了Android中EditText的监听接口,TextWatcher ...
- Android addTextChangedListener(文本监听)参数解释及实现EditText字数监听
由于最近做项目要检测EditText中输入的字数长度,从而接触到了Android中EditText的监听接口,TextWatcher.它有三个成员方法,第一个after很简单,这个方法就是在EditT ...
- JS监听输入框值变化兼容 onpropertychange、oninput
onpropertychange 属IE oninput 属除IE外(Chrome.Firefox.SS) 所以肯简单的办法嘛: 1. 一个input里面写两个属性事件 2.写在JS中判断浏览器添加监 ...
- JS跨域解决iframe高度自适应(IE8/Firefox/Chrome适用)
参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- js 监听输入框输入事件兼容ie7
$(element).bind("input propertychange",function(){});
- Android增加监听的三种实现方式
在Android中,为一个按钮增加监听的方式有五种 1.匿名内部类 @Override protected void onCreate(Bundle savedInstanceState) { sup ...
- 使用extentreports美化testng报告2,增加监听
有兴趣研究了extentreports报告美化插件,但是因为发现插件有很多内容不能自定义,所以放弃了这个插件,我扩充了官方代码的demo,在testng中增加了监听,并打印了一些测试用例,现在我把两个 ...
随机推荐
- 力扣(LeetCode)4的幂 个人题解
给定一个整数 (32 位有符号整数),请编写一个函数来判断它是否是 4 的幂次方. 示例 1: 输入: 16 输出: true 示例 2: 输入: 5 输出: false 进阶:你能不使用循环或者递归 ...
- C语言入门教程: 一个简单的实例
对于学习要保持敬畏! 语言不只是一种工具,还是一种资源,因此,善待它,掌握它! 我们知道,对于未知通常都会充满好奇和畏惧,既想了解它,又害怕神秘面纱隐藏的不确定性.对于一门编程语言同样如此,我将以 ...
- Linux下安装和使用WPS,体验良好
最近,我在ubuntu18.04.3下面使用LibreOffice,感觉良好. 正值政府机关在进行2019年度正版软件使用情况整改,保护知识产权,我表示热烈欢迎并强烈支持. 通过摸底,因为以前采购的w ...
- 解放双手,在PC端进行Android真机调试
scrcpy简介(拼写是scrcpy,非Python爬虫框架Scrapy) 简单地来说,scrcpy就是通过adb调试的方式来将手机屏幕投到电脑上,并可以通过电脑控制您的Android设备.它可以通过 ...
- Git的使用和基本概念理解
参考:https://www.liaoxuefeng.com/wiki/896043488029600 一).git的使用: 1.创建版本库(Resopsitory),相当于一个目录,目录中所有的文件 ...
- Oracle '26-2月 -19 03.34.47.000000 下午' 字符串日期解析
Oracle数据库, 时间字段是varchar2类型, 存储了 '26-2月 -19 03.34.47.000000 下午' 格式(TIMESTAMP 数据类型)的字符串日期, 将其解析为yyyy-M ...
- 一篇文章搞定Python多进程(全)
1.Python多进程模块 Python中的多进程是通过multiprocessing包来实现的,和多线程的threading.Thread差不多,它可以利用multiprocessing.Proce ...
- python--BMI
#bmi height,weight = eval(input("请输入身高(m) 体重(kg),以逗号隔开\n")) bmi = weight/pow(weight,2) pri ...
- C#学习笔记02--Bool,关系/逻辑运算符, if/switch语句
一. Bool类型 逻辑判断, C#中只有true和false两个值; 使用场景: 在分支和循环语句中, 常用作为判断条件来使用; 二. 关系运算符 关系运算符 (> < &g ...
- vue 中使用 watch 的各种问题
报错: Method "watch" has type "object" in the component definition. Did you refere ...