很多前端开发的朋友可能都会遇到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. Odometer使用JavaScript和CSS制作数字滑动效果

    Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...

  2. Hacker(17)----认识Windows系统漏洞

    Windows系统是迄今为止使用频率最高的操作系统,虽然其安全性随着版本的更新不断提高,但由于人为编写的缘故始终存在漏洞和缺陷.但Mircosoft公司通过发布漏洞补丁来提高系统的安全性,使Windo ...

  3. 如何安装windows7系统

      在XP时代,光驱对于我们而言仅仅是装系统用,不过在Win7发布之后,可以用U盘直接安装,省时省力. 首先在互联网下载UltraISO光盘映像文件制作/编辑/格式转换工具,(当然还有其它如WinIS ...

  4. windows中java读目录空格变成%20 处理方法

    URL url = Thread.currentThread().getContextClassLoader().getResource(""); String path = ur ...

  5. poj1064 二分,注意精度!

    Cable master Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 35269   Accepted: 7513 Des ...

  6. Jquery函数实现时间显示模式为更新于+被当前时间减去后剩余的时间值(例如:更新于三小时前)的处理。

    var time_eles = $(".time_tranfer"); for(var i =0; i < time_eles.length;i++){ var time_e ...

  7. hdu5353 Average(模拟)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Average Time Limit: 4000/2000 MS (Java/Ot ...

  8. iphone手机端图片错位修正的js代码

    <script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...

  9. IE CSS Bug 系列

    1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset=& ...

  10. eclipse修改字体

    修改xml字体: window→Preferences→General→Colors and Fonts→Basic→Text Font