很多前端开发的朋友可能都会遇到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 高度自动变化的更多相关文章

  1. textarea高度自动增高

    <!--随着textarea 输入内容 自动增加高度--> <script type="text/javascript"> $(".input_t ...

  2. 父div高度不能根据子div高度自动变化的解决方案

    <div id="parent"> <div id="content"> </div> </div> 当cont ...

  3. textarea 高度自动

    <textarea id="suggest" type="text" name="suggest" class="form- ...

  4. react textArea 高度不变化问题

    ref={el =>{ if(el){ el.textareaRef.style.height = el.textareaRef.scrollHeight + 'px'; } } }

  5. html文本域textarea高度自增、自动换行

    文本域自动换行.高度自增,采用以下方式: html: <textarea rows="1" class="answerTextArea" maxlengt ...

  6. textarea 实现高度自动增长

    有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...

  7. textarea宽度、高度自动适应处理方法

    textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...

  8. textarea高度自适应自动展开

    在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...

  9. textarea高度跟随文字高度而变化

    html部分: <textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea> js部分: < ...

随机推荐

  1. Java中普通代码块,构造代码块,静态代码块的代码演示样例及区分

    //运行顺序:(优先级从高到低.)静态代码块>mian方法>构造代码块>构造方法. 当中静态代码块仅仅运行一次.构造代码块在每次创建对象是都会运行. 1 普通代码块 <span ...

  2. MongoDB 操作手冊CRUD插入

    插入操作 插入记录 1.插入一条记录 db.testData.insert({num:1,name:'a'}); 结果 WriteResult({ "nInserted" : 1 ...

  3. epoll的原理和使用方法

    设想一个场景:有100万用户同一时候与一个进程保持着TCP连接,而每个时刻仅仅有几十个或几百个TCP连接时活跃的(接收到TCP包),也就是说,在每一时刻,进程值须要处理这100万连接中的一小部分连接. ...

  4. [RxJS] Adding Conditional Logic with Filter

    Often you only want values to proceed through your stream if they meet certain criteria, just as if ...

  5. 自定义seekbar中,thumb被覆盖掉一部分问题

  6. TTB 基本

    中文名 ,线程构建模块 外文名 Thread Building Blocks 缩    写 TBB 开    发 intel 目录 1线程构建模块 2黑体亮温 3斜交载重轮胎 4串联球轴承     1 ...

  7. Linux重装系统后SSH登录失败

    #Linux重装系统后SHH登录服务器报错 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE H ...

  8. 除去内容中的HTML代码方法

    显示内容时,需要截取部分,而不要全部显示.在截取时,会出现这样的情况: 截取一定量的字符串后,可能会把未关闭的表格HTML代码留下来,最終导致界面受影响, 下面的是C#解决办法: public str ...

  9. ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法

    转帖:原文地址http://blog.csdn.net/panys/article/details/3838846 archive log 日志已满ORA-00257: archiver error. ...

  10. iOS学习笔记-CoreData

    简介 CoreData提供了对象关系映射(ORM)功能,从效果上说就是创建了一个"虚拟对象数据库",也可以把它看作一个综合的数据库管理库. NSManagedObjectConte ...