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

由于 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. php文件下载方法收藏(附js下载技巧)

    function down($url){ header('Content-Description: File Transfer'); header('Content-Type: application ...

  2. 在Discuz X 中增加一个单独的页面

    如果在DZ中增加一个新的页面,并且取得DZ中相关的用户等乱七八糟的属性,在旧的版本中只要引用一个 -. comm.php 文件就可以,但是在 X 版本以后好像就没.还好,X版本中还是有办法解决的,使用 ...

  3. ssh 操作

    1.登录 ssh 用户名@远程地址 2.拷贝:scp -r 本地文件夹 远程文件夹(user@ip:目录) 3.从ssh中临时退出: a. ~  (control+z) b.查看后台任务:jobs c ...

  4. javascript jquery console调试方法说明

    控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 一.显示信息的命令 Firebug内置一个console对象,提供5种方法,用来显示 ...

  5. adminlte+layui框架搭建3 - layui弹出层

    在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...

  6. 服务端 安装配置 svn

    检查是否安装svn svn --version 看看,既能确定是否安装,又能确定版本多少 安装 svn yum -y install subversion 创建仓库存放目录 mkdir -p /opt ...

  7. Luogu P1282 多米诺骨牌 DP。。背包?

    背包...差不多..QWQ 设f[i]为达到差值为i的状态需要多少次,那就很显然了: 注意区分正负不同的代价的循环方向 技巧:如果不想改负数的话,那可以移动一下数组下标,用一个新的指针指向原来的数组 ...

  8. UVA - 11552 DP 划分

    每k个字符划分一个组,该组内字符顺序可以任意重排,定义块为最长的连续的字符子串,求长度为m*k的字符串中最少的块的数目 设\(dp[i][j]\):前\(i\)组中第\(i\)组结尾为\(j\)的最优 ...

  9. ZOJ - 1539 记忆化搜索

    注意不要仅搜DP(1e7),因为这不是线性的 #include<iostream> #include<algorithm> #include<cstdio> #in ...

  10. ASP.NET与.NET区别

    1.NET是什么? .Net全称.NET Framework是一个开发框架,不是一门编程语言,简单的来说 就是一组类库框架,.NET开发支持C#.VB.NET.J#.Js和Managed C++等 其 ...