Angular Textarea 高度自动变化
很多前端开发的朋友可能都会遇到textarea 输入框的高度不能自动随着用户的输入变化的问题,今儿小生也遇到了, 并通过网络上的信息解决了这个问题,于是将解决方法贴上,以作备忘。
directiveApp.directive('autoHeight', function(){
function autoHeight(elem){
elem.style.height = 'auto';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + 'px';
}
return {
scope: {},
link: function (scope, ele, attrs) {
var oriEle = $(ele).get(0);
$(oriEle).focus();
$(oriEle).bind('keyup click', function(e) {
autoHeight($(this).get(0));
});
var timer = setInterval(function(){
if($(oriEle).val()) {
autoHeight(oriEle);
clearInterval(timer);
}
}, 100);
}
};
});
Html code:
<textarea auto-height></textarea>
不才,望谅。
Angular Textarea 高度自动变化的更多相关文章
- textarea高度自动增高
<!--随着textarea 输入内容 自动增加高度--> <script type="text/javascript"> $(".input_t ...
- 父div高度不能根据子div高度自动变化的解决方案
<div id="parent"> <div id="content"> </div> </div> 当cont ...
- textarea 高度自动
<textarea id="suggest" type="text" name="suggest" class="form- ...
- react textArea 高度不变化问题
ref={el =>{ if(el){ el.textareaRef.style.height = el.textareaRef.scrollHeight + 'px'; } } }
- html文本域textarea高度自增、自动换行
文本域自动换行.高度自增,采用以下方式: html: <textarea rows="1" class="answerTextArea" maxlengt ...
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- textarea宽度、高度自动适应处理方法
textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...
- textarea高度自适应自动展开
在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...
- textarea高度跟随文字高度而变化
html部分: <textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea> js部分: < ...
随机推荐
- Java中普通代码块,构造代码块,静态代码块的代码演示样例及区分
//运行顺序:(优先级从高到低.)静态代码块>mian方法>构造代码块>构造方法. 当中静态代码块仅仅运行一次.构造代码块在每次创建对象是都会运行. 1 普通代码块 <span ...
- MongoDB 操作手冊CRUD插入
插入操作 插入记录 1.插入一条记录 db.testData.insert({num:1,name:'a'}); 结果 WriteResult({ "nInserted" : 1 ...
- epoll的原理和使用方法
设想一个场景:有100万用户同一时候与一个进程保持着TCP连接,而每个时刻仅仅有几十个或几百个TCP连接时活跃的(接收到TCP包),也就是说,在每一时刻,进程值须要处理这100万连接中的一小部分连接. ...
- [RxJS] Adding Conditional Logic with Filter
Often you only want values to proceed through your stream if they meet certain criteria, just as if ...
- 自定义seekbar中,thumb被覆盖掉一部分问题
- TTB 基本
中文名 ,线程构建模块 外文名 Thread Building Blocks 缩 写 TBB 开 发 intel 目录 1线程构建模块 2黑体亮温 3斜交载重轮胎 4串联球轴承 1 ...
- Linux重装系统后SSH登录失败
#Linux重装系统后SHH登录服务器报错 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE H ...
- 除去内容中的HTML代码方法
显示内容时,需要截取部分,而不要全部显示.在截取时,会出现这样的情况: 截取一定量的字符串后,可能会把未关闭的表格HTML代码留下来,最終导致界面受影响, 下面的是C#解决办法: public str ...
- ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法
转帖:原文地址http://blog.csdn.net/panys/article/details/3838846 archive log 日志已满ORA-00257: archiver error. ...
- iOS学习笔记-CoreData
简介 CoreData提供了对象关系映射(ORM)功能,从效果上说就是创建了一个"虚拟对象数据库",也可以把它看作一个综合的数据库管理库. NSManagedObjectConte ...