html中用div代替textarea实现输入框高度随输入内容变化

时间:2022-10-03 07:52:15

项目中的需求:留言栏输入高度变化,超过1行时,自动伸展,超过4行后,不再伸展。主要思想是利用最小高度和最大高度,再加上overflow来实现,到了最大高度,文字不会溢出而是隐藏。根据文本框中字体的大小,高度需要适当调整。

代码:

<div id="leave-message-textarea" contenteditable="true" data-text="输入留言"></div>
#leave-message-textarea{
width: 100%;
min-height:20px;
max-height:70px;
outline:;
border: 1px solid #000;
font-size: 13px;
overflow-x: hidden;
overflow-y: auto;
-webkit-user-modify: read-write-plaintext-only;
}

其中div的placeholder效果用data-text属性来实现,css代码如下:

[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text);
}

html中用div代替textarea实现输入框高度随输入内容变化的更多相关文章

  1. &lbrack;iOS&rsqb; 输入框高度随输入内容变化

    一般,类似聊天软件的输入框默认都是显示一行的,在用户输入过程中根据输入文字的内容来改变输入框的高度,以便显示全部文字.像微信,QQ的输入框就是这样的.那么这个效果应该怎么实现呢? 新博客:wosson ...

  2. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  3. 用一个div模拟textarea并实现高度自适应

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. textarea高度随文本内容变化,且不出现滚动条

    通常文本域的写法如下 <textarea type="text" class="form-control pull-left" id="desc ...

  5. td高度不随内容变化display&colon;block&semi;display&colon;block&semi;display&colon;block&semi;display&colon;block&semi;display&colon;block&semi;

    在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ height:236px; overflow:hidden; 在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ ...

  6. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  7. div模拟textarea且高度自适应

    需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...

  8. 输入框input内容变化与onpropertychange事件的兼容

    一.输入框常用的几个事件 onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句 ...

  9. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

随机推荐

  1. Linux系统的初化始配置(包括配置网络,修改主机名,关闭firewalld与selinux的生效)

    一.配置网络环境 1.运行 cmd 查看本机的ip地址,然后记录下来. 2.网络和共享中心--本地连接属性如下: 手工配置到本地连接上面 IP:172.16.191.215,DNS:101.7.8.9 ...

  2. Java中BigDecimal的8种舍入模式

    java.math.BigDecimal 不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值和32位的整数标度(scale)组成. 如果为零或正数,则标度是小数点后的位 ...

  3. Hibernate征途(七)之复合主键映射和集合映射

    把这两种映射放到一起说,是因为这两种映射不像前面的复用型映射.数量和方向型映射那么分类鲜明,所以放到了这个“其他”里面. 复合主键映射 在关系模型中,复合主键和其他的主键方式没有很大区别,但是反映到对 ...

  4. 【Android - 框架】之刷新加载框架Ultra-Pull-To-Refresh的使用

    Ultra-Pull-To-Refresh框架是用来嵌套其他布局,实现下拉刷新和上拉加载的框架.它其中可以嵌套任何控件,ListView.GridView.ScrollView.RecyclerVie ...

  5. Linux系统编程(17)——正则表达式进阶

    C的变量和Shell脚本变量的定义和使用方法很不相同,表达能力也不相同,C的变量有各种类型,而Shell脚本变量都是字符串.同样道理,各种工具和编程语言所使用的正则表达式规范的语法并不相同,表达能力也 ...

  6. React 实践项目 (三)

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...

  7. cenos7上部署python3环境以及mysqlconnector2&period;1&period;5

    本机的python2不要管他,因为可能有程序依赖目前的python2环境,比如yum!!!!! 一.安装python3依赖环境: yum -y install zlib-devel bzip2-dev ...

  8. Pyton:类变量,实例变量,类对象,实例对象

    https://www.cnblogs.com/crazyrunning/p/6945183.html

  9. nlp资料网站

    原文地址 http://blog.sina.com.cn/s/blog_574a437f01019poo.html 昨天实验室一位刚进组的同学发邮件来问我如何查找学术论文,这让我想起自己刚读研究生时茫 ...

  10. USG防火墙DHCP设置保留IP地址

    在使用disp cur查看当前配置 然后使用undo修改 这样10.0.1.1网段到10.0.1.100之间的IP地址不会分出去