很多前端开发的朋友可能都会遇到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. UVA 10400 Game Show Math (dfs + 记忆化搜索)

    Problem H Game Show Math Input: standard input Output: standard output Time Limit: 15 seconds A game ...

  2. 菜鸟学EJB(二)——在同一个SessionBean中使用@Remote和@Local

    不废话.直接进入正题: 在Jboss4及曾经的版本号中,例如以下代码能够成功部署: package com.tjb.ejb; import javax.ejb.Local; import javax. ...

  3. STM32外部中断具体解释

      一.基本概念 ARM Coetex-M3内核共支持256个中断,当中16个内部中断,240个外部中断和可编程的256级中断优先级的设置.STM32眼下支持的中断共84个(16个内部+68个外部), ...

  4. 关于SetCapture() 和 ReleaseCapture()的使用方法

    查MSND,对SetCapture()函数的说明为:“该函数在属于当前线程的指定窗体里设置鼠标捕获.一旦窗体捕获了鼠标,全部鼠标输入都针对该窗体,不管光标是否在窗体的边界内.同一时刻仅仅能有一个窗体捕 ...

  5. Dynamics CRM 2016 使用Plug-in Trace Log调试插件

    1.写插件 首先,让我们写一个简单的插件来测试新插件跟踪日志功能.请注意,在下面的示例代码中,我们增加ITracingService的一个实例,以及记录有关插件的执行信息记录的一些键值: 2.注册插件 ...

  6. C#冒泡泡算法

    代码如下: static void Main(string[] args)         {             int[] arr = new int[] { 87, 85, 89, 84, ...

  7. python进阶之路4.2---装饰器

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. jQuery之.html()和.text()区别

    .html()//获取标签和内容 .text()//只获取内容

  9. oracle中简单查询语句的格式及执行顺序分析

    一条简单的查询sql格式如下: SELECT ... FROM .... [WHERE ...] --过滤单行 [GROUP BY ...   [HAVING ...]]--GROUP BY对前面wh ...

  10. poj3614 贪心

    Sunscreen Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6410   Accepted: 2239 Descrip ...