很多前端开发的朋友可能都会遇到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. Linux内核设计基础(十)之内核开发与总结

    (1)Linux层次结构: (2)Linux内核组成: 主要由进程调度(SCHED).内存管理(MM).虚拟文件系统(VFS).网络接口(NET)和进程间通信(IPC)等5个子系统组成. (3)与Un ...

  2. 事关Animation Tree的工作随笔(二)

    上回说到,游戏项目中客观会遇到逻辑状态的复杂性和动画状态的单一性之间的矛盾,那么Animation Tree是如何解决这个问题的呢? 这又需要引入一个定律:就是逻辑状态无论有多么复杂,但一套逻辑状态组 ...

  3. Java第三周学习日记

    Day01 1.线程 进程:进程就是正在运行的应用程序.进程负责了内存空间的划分. 线程:一个进程中的代码是由线程去执行的,线程也就是其中一个执行路径. 多线程:一个进程中有多个线程可以同时执行任务. ...

  4. Spark 初级算子

    #常用Transformation(即转换,延迟加载) #通过并行化scala集合创建RDD val rdd1 = sc.parallelize(Array(1,2,3,4,5,6,7,8)) #查看 ...

  5. "客户端无法连接到远程计算机"错误的解决方法

    问题: 客户端无法连接到远程计算机. 可能没有启用远程连接或者计算机太忙不能接受新的连接. 也可能是网络问题阻止连接.请稍后重新尝试连接. 如果问题仍然存在 请与管理员联系. 解决方法: 1.首先确认 ...

  6. JS文件中加载jquery.js

    原文链接:http://blog.csdn.net/whatday/article/details/39553451 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他J ...

  7. HSSFClientAnchor(int dx1,int dy1,int dx2,int dy2,short col1,int row1,short col2, int row2)

      public HSSFClientAnchor(int dx1, int dy1, int dx2, int dy2, short col1, int row1, short col2, int  ...

  8. with 与 debugger

    with在严格模式下是禁止使用的,而debugger是在调试模式下才有效果的,目测作者自己在用的脚本压缩工具在有dubugger语句的情况下会影响压缩结果,导致失败. with(varible)实际上 ...

  9. 深入javascript——构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = &q ...

  10. LeetCode-Divdend two Integers

    题目: Divide two integers without using multiplication, division and mod operator. 思路分析 二分法.将除数不断增倍,而结 ...