当前位置: 首页 > news >正文

简单实现一个textarea自适应高度

textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度。

预览地址:textarea

我们知道textarea有个rows的属性,改变rows的值可以改变textarea的高度,至于怎么改变不做探究, 所以思路就来了:当文本输入的时候,动态给textarea赋值rows, rows自会导致textarea的高度改变

接下来,问题就来了,如何动态获取rows的值?首先我们先看一下textarea与rows, cols以及浏览器的的关系是怎样的?可以参考张大神的文章HTML textarea cols,rows属性和宽度高度关系研究

猜测你已经看完了,大概得出一个结论就是:textarea高度 ≈ lineHeight * rows. 这样思路就更清晰了。看代码

resizeHeight(elem, style) {
  elem.removeAttribute('rows')
  elem.style.height = 'auto'
  const { scrollHeight } = elem
  const { lineHeight, paddingTop, paddingBottom } = style
  let rowsNum = Math.round((scrollHeight - paddingTop - paddingBottom) / lineHeight)
  elem.setAttribute('rows', rowsNum)
},

原理很简单,获取到元素的scrollHeight(即元素真实高度), 与元素的行高求商,四舍五入。有同学说,直接把scrollHeight赋值给元素不就行了,这么麻烦,说的好有道理。是不是这样

const { scrollHeight } = elem
elem.style.height = `${scrollHeight}px`

貌似好像也行呀,pc站好像没问题,不过笔者在移动端测试的时候删除的时候,貌似有点小问题。换成改成获取rows的方法就好了。

如果textarea设置padding的话,需要减去上下padding的值,代码中也有体现。

有问题欢迎交流,最后附上源码。

查看源码:源码

相关文章:

  • 苹果数据记录之详细让人不寒而栗
  • TCP的三次握手(建立连接)和四次挥手(关闭连接)
  • 0基础学习移动端适配
  • 产品经理工作职责
  • 【SpringBoot】URL路径映射规则
  • JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!...
  • Java之多线程优先级基础
  • WCF应用场景
  • 基于Netty+Zookeeper+Quartz调度分析
  • 关于Execel 2007 连接到 hive odbc
  • 计算机网络
  • cocos2d-x游戏开发系列教程-超级玛丽06-CMGameScene
  • 使用pip命令报You are using pip version 9.0.3, however version 18.0 is available pip版本过期.解决方案...
  • JavaScript访问对象属性
  • Zeit.co 免费服务器平台
  • jquery ajax学习笔记
  • Just for fun——迅速写完快速排序
  • Linux快速配置 VIM 实现语法高亮 补全 缩进等功能
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • OSS Web直传 (文件图片)
  • Spring Cloud中负载均衡器概览
  • Sublime text 3 3103 注册码
  • 基于游标的分页接口实现
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 前端代码风格自动化系列(二)之Commitlint
  • 前端面试题总结
  • 数据科学 第 3 章 11 字符串处理
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 一起来学SpringBoot | 第三篇:SpringBoot日志配置
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • k8s使用glusterfs实现动态持久化存储
  • zabbix3.2监控linux磁盘IO
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • # 安徽锐锋科技IDMS系统简介
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • (6)设计一个TimeMap
  • (zt)最盛行的警世狂言(爆笑)
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (附源码)计算机毕业设计ssm基于B_S的汽车售后服务管理系统
  • (译)计算距离、方位和更多经纬度之间的点
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转)nsfocus-绿盟科技笔试题目
  • (转)shell中括号的特殊用法 linux if多条件判断
  • ../depcomp: line 571: exec: g++: not found
  • .net core 客户端缓存、服务器端响应缓存、服务器内存缓存
  • .net 程序发生了一个不可捕获的异常
  • .net打印*三角形
  • .net分布式压力测试工具(Beetle.DT)
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • .vue文件怎么使用_vue调试工具vue-devtools的安装
  • [20170705]diff比较执行结果的内容.txt
  • [AIGC 大数据基础]hive浅谈
  • [C/C++] C/C++中数字与字符串之间的转换
  • [C++进阶篇]STL中vector的使用
  • [Docker]六.Docker自动部署nodejs以及golang项目