Angular Textarea 高度自动变化

很多前端开发的朋友可能都会遇到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>

  

不才,望谅。

时间: 2024-10-27 13:38:41

Angular Textarea 高度自动变化的相关文章

textarea高度自动增高

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 随着textarea 输入内容 自动增加高度 <script type="text/javascript">     $(".input_textarea").each(function(){         this.style.height=this.scrollHeight+'px';     });     $(".input_textarea").

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

1 <div id="parent"> 2 <div id="content"> </div> 3 </div> 当content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展.解决方案如下: 1 <div id="parent"> 2 <div id="content"></div> 3 <

textarea 实现高度自动增长

有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因此可以动态检测div的高度,然后将div的高度复制给textarea.这个方法应该是兼容性较好而且比较稳健的办法,但实在太繁琐 还有一个解决办法就是动态将textarea的scrollHeight 复制给高度.我采用的是后者 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

如何让 textarea 文本框 高度自动伸缩

个人博客:柚子青年. 原文链接:如何让 textarea 文本框 高度自动伸缩 本文主要讲的是如何让 textarea 文本框 自动伸缩 原理:每次输入文字后重置文本框默认高度 判断是否出现滚动条 动态修改高度 . $(this).change(function () { this.style.height = 'height'; // height = textarea 默高度 if (this.scrollHeight >= this.offsetHeight) { // 判断是否出现滚动条

uitable单元格高度自动适配

uitable单元格高度自动适配的前提是你要开启auto layout选项,不明白或者不熟悉的同学先看看这里 http://lvwenhan.com/ios/430.html 按照很多用例上的步骤,不想却踩了坑: 1,禁止实现代理函数 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath; 2,然后实现 - (CGFloat)tableView:(UITable

如何让一个div的大小,从某一个特定值开始,随内容的增加而自动变化?

简单来说,有一个div,它的width是固定的.现在设置它的height值.height有一个最小的临界值,比如100px如果这个div里面的内容太少,达不到100px这个height值,那么div的height就设置为100px,如果这个div里面的内容太多,超过了100px,那么div的height就随着内容的多少自动变化. 怎样实现才能这样设置height的值??(div里面的内容是直接用<%=rs("content")%>来读取的,所以,在生成html代码之前,不可

freemarker导出word——让表格数据行数 列数自动变化

行数.列数变化只需定义一个List<List<T>> freemarker遍历的话,只需要使用freemarker的标记性语言<#list report.qc_third_agentTable as  table2_tr>遍历即可,如图 实现的效果 freemarker导出word--让表格数据行数 列数自动变化,布布扣,bubuko.com

Textarea高度随内容自适应地增长,无滚动条

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>枫芸志 » 文本框textarea高度自适应增长/伸缩</TITLE> </HEAD> <BODY> <textarea id="txtContent" rows="5&q

jQuery实现textarea高度根据内容自适应

1 //jQuery实现textarea高度根据内容自适应 2 $.fn.extend({ 3 txtaAutoHeight: function () { 4 return this.each(function () { 5 var $this = $(this); 6 if (!$this.attr('initAttrH')) { 7 $this.attr('initAttrH', $this.outerHeight()); 8 } 9 setAutoHeight(this).on('inpu