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

由于 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. gnome-terminal

    在终端中打开终端: gnome-terminal 同时打开多个终端: gnome-terminal --window --window 此处有几个 --window 就会打开几个终端 最大化形式打开终 ...

  2. CBoard 图表布局浅析

    这两天想了解下图表布局,对前端Angular不熟悉,Java也不熟悉.只能靠经验摸索查找,所以把过程简单记录,生怕忘记.首先是打开图表,发现位置指向 /config/widget, 然后用IDEA搜索 ...

  3. springcloud微服务总结四 负载均衡

    一:Ribbon简介 Ribbon是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上.它是一个经过了云端测试的IPC库,可以很好地控制HTTP和TCP客户端的一些行为 ...

  4. Tomcat 部署项目的几种常见方式

    转自:https://www.cnblogs.com/yuht/p/5714624.html https://www.cnblogs.com/ysocean/p/6893446.html Tomcat ...

  5. elemetnui 分页..解决 bug

    :current-page.sync="thisCurPage" 的确会 修改页码,但是会触发一个 bug... 比如 当前 选择的是第二页,使用 js 模拟 点击(或者修改父组件 ...

  6. Django-admin 的使用

    admin 组件的使用 Django 提供功能十分强大的后台管理组件 admin 来实现自动管理. admin 是一个组件,与 APP 一样,项目启动一开始就加载了.在 setting.py 中的 I ...

  7. html的第一个程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [转] Spring Integration 系统集成

    [From] http://blog.csdn.net/w_x_z_/article/details/53316618 pring Ingegration 提供了基于Spring的EIP(Enterp ...

  9. 用jenkins编译WPF程序并传输到服务器

    环境准备: 1.ide   visual studio2017 Enterprise,Ide可以https://visualstudio.microsoft.com/zh-hans/downloads ...

  10. mysql 配置文件详解

    mysql配置文件参数详解 (一) [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql ...