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来控制,下面是实 ...
随机推荐
- 最短路径SPFA算法(邻接表存法)
queue <int> Q; void SPFA (int s) { int i, v; for(int i=0; i<=n; i++) dist[i]=INF; //初始化每点i到 ...
- 导出table为Excel
1.HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- requests库安装
1.运行cmd输入pip install requests C:\Users\Administrator\AppData\Local\Programs\Python\Python37\Scripts ...
- C++_代码重用4-多重继承
继承使用时要注意,默认是私有派生.所以要公有派生时必须记得加关键字Public. MI(Multi Inheritance)会带来哪些问题?以及如何解决它们? 两个主要问题: 从两个不同的基类继承同名 ...
- codeforces 1100F Ivan and Burgers 线性基 离线
题目传送门 题意: 给出 n 个数,q次区间查询,每次查询,让你选择任意个下标为 [ l , r ] 区间内的任意数,使这些数异或起来最大,输出最大值. 思路:离线加线性基. 线性基学习博客1 线性基 ...
- java的Spring学习2- junit和mock
<!-- 引用Mock --> <dependency> <groupId>org.mockito</groupId> <artifactId&g ...
- HTML嵌套php
1. <?php echo 'if you want to serve XHTML or XML documents, do it like this'; ?> 2. <scri ...
- PIE SDK辐射定标
1. 算法功能简介 辐射定标是使用大气纠正技术将影像数据的灰度值转化为表观辐亮度.表观反射率等物理量的过程. PIE支持算法功能的执行,下面对辐射定标算法功能进行介绍. 2. 算法功能实现说明 2.1 ...
- PIE SDK图层树伙伴控件示例
1. 功能简介 TocControl控件的主要作用是显示当前加载的图层有哪些.采用什么样的符号等,目的是使用户对当前加载的数据和结构有一个总体的把握.与之相关联的伙伴控件有MapControl,Pa ...
- git push的一些坑
在安装git的时候我们一般会自己设置一个用户名和邮箱,这个一般设置为全局的用户名,如下所示 git config --global user.name "xxx" git conf ...