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

由于 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";

textarea高度随着内容的多少而变化,高度可以删减的更多相关文章

  1. 小程序实现textarea随输入的文字行数变化高度自动增加

    参考链接:https://blog.csdn.net/liuwengai/article/details/78987957 该实现方法是根据上面的链接改编为小程序的实现,代码如下: wxml: < ...

  2. Android EditText控件即设置最小高度又运行高度随内容增加而变化

    (转)http://www.aichengxu.com/view/1405748   记录学习用 如题,有时候EditText需要一个最小的高度,但是在输入更多内容时,要随着内容的增加而变化高度,一般 ...

  3. textarea文本域的高度随内容的变化而变化

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...

  4. textarea的高度随内容变化而变化

    <li class="text"> <span>参赛宣言*</span> <textarea name="txt" i ...

  5. 如何使tinymce编辑器的高度随内容自变化(转载)

    如何使tinymce编辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件: tinymce.init({ selector: "textarea", // ...

  6. 实现textarea高度自适应内容,无滚动条

    最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

  7. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

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

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

  9. textarea高度随内容自适应

    最近遇到一个需求,视频名称初始有个生成值,并且支持可以手动修改,修改后名称过长后换行高度随内容增加.刚开始想到用input但是发现input不支持换行.后来用了textarea,用js来控制,下面是实 ...

随机推荐

  1. 单据头->实体服务规则中根据单据类型设置可见性或必录等

  2. 5、Numpy处理数据

    转载自:http://old.sebug.net/paper/books/scipydoc/numpy_intro.html#id9 2 NumPy-快速处理数据 标准安装的Python中用列表(li ...

  3. CBoard 视图中的拖拽实现

    CBoard中拖拽的功能其实引用了 github的angular-drag-and-drop-lists控件来实现的. 在html页面中引用 div引用dnd-inserted属性 Cboard 系列 ...

  4. shell-004:检测机器存活或者网络陡动情况!

    如下图情况,我们监测的就是此数据,当大于50%了,我们就可以设置告警等! #!/bin/bash # 用ping检测一台机器的存活或者网络波动情况 # 检测机器的丢包率来检测网络波动情况!! n=`p ...

  5. Linux下parted分区超过2TB硬盘-分区格式化

    1.parted 设备名进入分区 parted /dev/vdb 2.输入print打印列出当前分区设备的磁盘容量大小 3.设置磁盘分区为gpt模 mklabel gpt 然后点击YES继续(提示磁盘 ...

  6. os模块与 sys模块

    os模块是与操作系统交互的一个接口 ''' os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作 ...

  7. QDU_组队训练(ABEFGHKL)

    A - Accurately Say "CocaCola"! In a party held by CocaCola company, several students stand ...

  8. jstl 遍历数据

    1   导入 jstl  的  jar 包 2. 页面中添加 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/ ...

  9. 剑指offer——面试题14:剪绳子

    // 面试题14:剪绳子 // 题目:给你一根长度为n绳子,请把绳子剪成m段(m.n都是整数,n>1并且m≥1). // 每段的绳子的长度记为k[0].k[1].…….k[m].k[0]*k[1 ...

  10. Node.js frameworks

    1. Express 2. Koa 3. LoopBack egghead.io What is egghead? egghead is a group of working web developm ...