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来控制,下面是实 ...
随机推荐
- idea 激活
激活时选择License server,填入 http://idea.wlphp.com:1017 点击Active即可 2DZ8RPRSBU-eyJsaWNlbnNlSWQiOiIyRFo4UlBS ...
- 【原创】nginx入门
一.简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点( ...
- ABP项目后台初始化数据库
设置host为启动项,并修改连接字符串 在程序包管理控制台中,默认项目选中EFCore 执行Update-Database命令
- http请求报头和响应报头(1)
1.web端不可避免的http缓存机制,要理解缓存机制,先来了解下http的请求报文和响应报文的内容 2.请求报文 2.1请求行 请求行三部分组成:请求方法.URL以及版本协议 请求的方法有G ...
- TCP协议三次握手、四次挥手过程
本文通过图来梳理TCP-IP协议相关知识.TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道.如图1所示,给出了TCP通信过程的示意图. 上图主要包括三部分:建立连接.传输数 ...
- 第十八章:自定义splash screen、app icon和tab icon
本文介绍如何自定义splash screen.app icon和tab icon. 1. 自定义splash screen和app icon 1.1 产生resources文件夹,启动命令行: ion ...
- TOJ 4002 Palindrome Generator
描述 A palindrome is a number that reads the same whether you read it from left to right or from right ...
- Python下Mysql数据连接池——单例
# coding:utf-8 import threading import pymysql from DBUtils.PooledDB import PooledDB from app.common ...
- HttpServlet的请求转发理解
一个http请求的流转,其实主要涉及到五部分的内容,第一部分就是request所包含的参数,也就是request.getAttribute能获取的东西:第二部分是request所携带的内容实体,这部分 ...
- 几道web题简单总结
拖了好长时间,总结一下这一段时间做的几道值得记录一下的题目,有的没做出来,但是学习到了新的东西 1.homebrew event loop ddctf的一道题目,学到了python eval函数的用法 ...