很多前端开发的朋友可能都会遇到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. git 学习笔记一

    1.git的 介绍 分布式和 集中式 集中式版本控制系统最大的毛病就是必须联网才能工作,如果在局域网内还好,带宽够大,速度够快,可如果在互联网上,遇到网速慢的话,可能提交一个10M的文件就需要5分钟, ...

  2. Hacker(16)----防范端口扫描与嗅探

    端口扫描与嗅探都是黑客常用的招数,其目的是定位目标计算机和窃取隐私信息.为确保自己计算机的安全,用户需要掌握防范嗅探与端口扫描的常见措施,保障个人隐私信息安全. 一.掌握防范端口扫描的常用措施 防范端 ...

  3. CodeManage 源代码管理器v2.0发布

    下载地址 欢迎大家提出宝贵的意见和bug

  4. oracle常用自定义函数集合

    1.Oracle 判断值是否为数字的函数CREATE OR REPLACE FUNCTION ISNUMBER(MyStr VARCHAR2) RETURN NUMBERIS  STR VARCHAR ...

  5. oracle 随Linux系统启动自启动设置

    本文转自http://www.jb51.net/article/19823.htm 首先,要在RHEL中设置允许ORACLE系统自动启动,因为默认情况下是设置为不允许的.操作如下: 在root账户下修 ...

  6. C# Linq Group By 多个字段并返回给实体类List

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace stud ...

  7. CentOS磁盘分区、格式化并挂载外置存储的方法

    1.划分外置存储主分区: 假设该外置存储在linux系统中被识别为/dev/sdb,使用fdisk /dev/sdb进入分区工具操作界面. 按p键打印当前外置存储分区情况,如果显示为空,则表示此外置存 ...

  8. (二)CodeMirror - 配置项

    theme: string theme:'monokai' 引入对应的css, <link rel="stylesheet" href="../theme/mono ...

  9. NYOJ 110 剑客决斗

    110剑客决斗 在路易十三和红衣主教黎塞留当权的时代,发生了一场决斗.n个人站成一个圈,依次抽签.抽中的人和他右边的人决斗,负者出圈.这场决斗的最终结果关键取决于决斗的顺序.现书籍任意两决斗中谁能胜出 ...

  10. c++模板编程-异质链表

    概念: 像一个普通的链表结点中,其中成员next通常是指向同类型结点的指针.这就约束了链表中结点必须是同一类型,从而整个链表都只能保存同一类型的数据.而异质链表则是让next指向任何一种类型,也包括存 ...