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来控制,下面是实 ...
随机推荐
- P2645 斯诺克 题解
P2645 斯诺克 题目背景 镇海中学开设了很多校本选修课程,有体育类.音乐类.美术类.无线电测向.航空航海航天模型制作等,力争使每位学生高中毕业后,能学到一门拿得出手的兴趣爱好,为将来的终身发展打下 ...
- Vuex 使用了 module 后的访问方法 ..
如果 使用了 module 和 namespace state 数据:=> this.$store.state.User.info (user 是模块名字. info 是 state 里 ...
- Apache 配置 虚拟主机
<VirtualHost *:80> ServerName tongcheng.5q88.cn:80 ServerAlias DirectoryIndex index.html index ...
- Luogu P1436 棋盘分割 暴力DP
我的天,,,,,n=8,k<=15,,,这怕不是暴力DP+高维数组.... 开一个五维数组f[k][i][j][p][q]表示从(i,j)到(p,q)中分成k个矩形最小的平方和. 然后初始化时用 ...
- P2763 试题库问题
传送门 显然的网络流,源点向所有题目连流量为1的边,表示一题只能用一次,题目向它的所有类型连边,流量设为1,类型向汇点连边流量为题目需要的该类型的数量 然后最大流 如果最大流小于总需要的类型题目数量则 ...
- PIE SDK彩色空间变换
1. 算法功能简介 使用彩色空间变换工具可以将三波段红.绿.蓝图像变换到一个特定的彩色空间,并且能从所选彩色空间变换回 RGB.两次变换之间,通过对比度拉伸,可以生成一个色彩增强的彩色合成图像.此外, ...
- opencv java小应用:比较两个图片的相似度
package com.company; import org.opencv.core.*; import org.opencv.imgcodecs.Imgcodecs; import org.ope ...
- OPENROWSET read excel
由于64位系统已经不支持 oledb 4.0访问 xls 1. 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序 去http://download.microsoft. ...
- Transform 引起的 z-index "失效"
重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题:设置了box-shadow后展现的阴影: 添加transform:rotate(10deg);后的效果: 查看CodePen例子:阴影效果 ...
- 【3dsMax安装失败,如何卸载、安装3dMax 2013?】
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...