textarea高度随着内容的多少而变化，高度可以删减

问题：可以多行输入，并且输入框的高度随着内容的多少而变化，输入框的高度不能只增不减

由于 input 只能单行输入

textarea可以多行输入，并且高度可以随着内容的增加而增加，但是当内容删减的时候，textarea的高度并不能变低

解决办法：用一个替换标签，这个替代标签所以样式包括字体都和textarea一模一样，内容与textarea内容同步，高度自适应，但是要用一个包裹层，其display设置为none，

达到页面上的视觉效果，只有一个内容，而我们仅仅只需要这个替换标签的高度，监听textarea 的keyup 事件将textarea的高度设置为替代标签的高度

    <div style="height:0; overflow:hidden;">
        <div class="shadow">{{txt}}</div>
    </div>
    <textarea name="disease" class="textarea diseaseTxt" type="text" placeholder="请输入内容" ng-model="txt" required maxlength="30"></textarea>


    keyup事件：this.style.height = $(".shadow").height()+"px";

随机推荐

搭建高可用mongodb集群（三）—— 深入副本集内部机制
在上一篇文章<搭建高可用mongodb集群(二)—— 副本集> 介绍了副本集的配置,这篇文章深入研究一下副本集的内部机制.还是带着副本集的问题来看吧! 副本集故障转移,主节点是如何选举的? ...
Emacs 24&period;3 配置JDEE(http&colon;//blog&period;csdn&period;net/csfreebird/article/details/19033939)
最近要重回Java编程,所以打算在最新版本的Emacs 24.3上配置JDEE,听说会有些问题,特此记录安装过程. Emacs 24.3内置了CEDET, 版本是2.0, 这是一个让人困惑的事情,因为 ...
Java中的toString()方法
Java中的toString()方法目录 Java中的toString()方法 1. 对象的toString方法 2. 基本类型的toString方法 3. 数组的toString ...
Rectangle and Square
Description Little Petya very much likes rectangles and especially squares. Recently he has received ...
[leetcode-434-Number of Segments in a String]
Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...
gb&lowbar;tree平衡树源码
1.平衡树简称AVL,出名的有红黑树,这里介绍一下gb_tree的实现 gb_tree的原理比红黑树简单,没有过多的旋转跳跃闭着眼,是一种叫AA树的结构(Arne Andersson's Genera ...
PostgreSQL中JSON、JSONB基本操作符
PostgreSQL 9.5以上的版本中有了很多方便的操作符,使得操作 JSON 变得非常方便了. 一. -> 和 ->> : -> 表示获取一个JSON数组元素,支持下标值( ...
树莓派3 Raspberry系统安装samba
默认Raspberry不自带samb,需要手动安装. 如果默认的rasp源不好用的话,可以使用下面从网上找的: deb http://mirrors.cqu.edu.cn/Raspbian/raspb ...
Windows核心编程：第6章线程基础
Github https://github.com/gongluck/Windows-Core-Program.git //第6章线程基础.cpp: 定义应用程序的入口点. // #include ...
Django使用静态文件
除了由服务器生成的HTML文件外,网页应用一般需要提供其它必要的文件 —— 比如图片文件.JavaScript脚本和CSS样式表 —— 来为用户呈现出一个完整的网站. 在Django中,我们将这些文件 ...

秒客网

textarea高度随着内容的多少而变化，高度可以删减

随机推荐

相关文章