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";
textarea高度随着内容的多少而变化,高度可以删减的更多相关文章
- 小程序实现textarea随输入的文字行数变化高度自动增加
参考链接:https://blog.csdn.net/liuwengai/article/details/78987957 该实现方法是根据上面的链接改编为小程序的实现,代码如下: wxml: < ...
- Android EditText控件即设置最小高度又运行高度随内容增加而变化
(转)http://www.aichengxu.com/view/1405748 记录学习用 如题,有时候EditText需要一个最小的高度,但是在输入更多内容时,要随着内容的增加而变化高度,一般 ...
- textarea文本域的高度随内容的变化而变化
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...
- textarea的高度随内容变化而变化
<li class="text"> <span>参赛宣言*</span> <textarea name="txt" i ...
- 如何使tinymce编辑器的高度随内容自变化(转载)
如何使tinymce编辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件: tinymce.init({ selector: "textarea", // ...
- 实现textarea高度自适应内容,无滚动条
最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
- Textarea高度随内容自适应地增长,无滚动条
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...
- textarea高度随内容自适应
最近遇到一个需求,视频名称初始有个生成值,并且支持可以手动修改,修改后名称过长后换行高度随内容增加.刚开始想到用input但是发现input不支持换行.后来用了textarea,用js来控制,下面是实 ...
随机推荐
- gnome-terminal
在终端中打开终端: gnome-terminal 同时打开多个终端: gnome-terminal --window --window 此处有几个 --window 就会打开几个终端 最大化形式打开终 ...
- CBoard 图表布局浅析
这两天想了解下图表布局,对前端Angular不熟悉,Java也不熟悉.只能靠经验摸索查找,所以把过程简单记录,生怕忘记.首先是打开图表,发现位置指向 /config/widget, 然后用IDEA搜索 ...
- springcloud微服务总结四 负载均衡
一:Ribbon简介 Ribbon是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上.它是一个经过了云端测试的IPC库,可以很好地控制HTTP和TCP客户端的一些行为 ...
- Tomcat 部署项目的几种常见方式
转自:https://www.cnblogs.com/yuht/p/5714624.html https://www.cnblogs.com/ysocean/p/6893446.html Tomcat ...
- elemetnui 分页..解决 bug
:current-page.sync="thisCurPage" 的确会 修改页码,但是会触发一个 bug... 比如 当前 选择的是第二页,使用 js 模拟 点击(或者修改父组件 ...
- Django-admin 的使用
admin 组件的使用 Django 提供功能十分强大的后台管理组件 admin 来实现自动管理. admin 是一个组件,与 APP 一样,项目启动一开始就加载了.在 setting.py 中的 I ...
- html的第一个程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转] Spring Integration 系统集成
[From] http://blog.csdn.net/w_x_z_/article/details/53316618 pring Ingegration 提供了基于Spring的EIP(Enterp ...
- 用jenkins编译WPF程序并传输到服务器
环境准备: 1.ide visual studio2017 Enterprise,Ide可以https://visualstudio.microsoft.com/zh-hans/downloads ...
- mysql 配置文件详解
mysql配置文件参数详解 (一) [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql ...