博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何让textarea随着内容自适应高度
阅读量:6829 次
发布时间:2019-06-26

本文共 758 字,大约阅读时间需要 2 分钟。

话不多说,直接上干货。

方案一:

用 div 模拟 textarea, 高度自适应,并且有 placeholder 效果(1)、使用 contenteditable 属性,可让 div 具有编辑输入效果(2)、模拟 placeholder 的提示效果,此处直接用 CSS 实现复制代码

(3)、contenteditable 在IOS上有兼容性,虽然能聚焦,但是不能输入内容,此时需要借助属性 -webkit-user-select: text , 来解决这个兼容性(4)、缺点:获取 div 文本的时候,内部会包含一些HTML标签,所以需要单独处理转译的数据,才能正常使用数据复制代码

方案二:

用 div 来实现高度自适应,但是输入内容还是再 textarea 标签里面(1)、设置一个 div 与 textarea 同层级,外层包裹一个 div ,定位为 relative(2)、textarea 绝对定位,宽度高度均为 100%,相对于父层 div 来说(3)、内部 div,设置为 relative, 在检测 textarea 的 onchange 事件的时候,把文本填充到内部 div 里面,以此来撑开父层 div 的高度和宽度(4)、给内部 div 设置 不可见属性,visibility:hidden,这样 div 是看不见的,但是它的物理位置是存在的,所以能够撑开父层 div(5)、该方案相对于方案一来说,更简便和完美,尤其是需要获取输入内容的时候复制代码

这两个办法,是我在开发中实际遇到的问题,所以现在分享出来,希望对大家有帮助,如果大家还有更好的办法,请告诉我,大家一起勉励哟~~~~~

转载于:https://juejin.im/post/5b7376746fb9a0096a05eb2e

你可能感兴趣的文章
扫硬盘
查看>>
设计模式(Java版)总结
查看>>
NDk编译opencv for Android,并引用在Unity3d游戏中的一般步骤
查看>>
zabbix 通过jmx监控tomcat
查看>>
LVM逻辑卷管理
查看>>
oracle权限详解
查看>>
港版iPhone4S今晚可到中关村 售价5800元起
查看>>
Linux如何开启mysql远程连接
查看>>
Exchange 2010,删除系统默认地址列表后, OWA 通讯簿失败问题解决办法
查看>>
linux系统强制踢掉其它登录用户
查看>>
用TestSuite管理Junit单元测试用例
查看>>
WAMP配置
查看>>
14.Ez***客户端是软件
查看>>
2011数据中心大会:构建新一代的数据中心
查看>>
我的友情链接
查看>>
centos安装LAMP环境时访问本地MYSQL数据库错误
查看>>
RotateAnimation的构造方法和ListView的一些认识
查看>>
[转]Struts2+Spring3+Hibernate4+Maven+EasyUI整合入门视频+视
查看>>
KVM虚拟化主机安装
查看>>
内部命令vs外部命令
查看>>