textarea设置行距(做一个能自适应高度的textarea的示例代码)
类别:Web前端 浏览量:799
时间:2021-10-05 00:42:08 textarea设置行距
做一个能自适应高度的textarea的示例代码方法
1. HTML结构:
<li id="container"> <textarea rows="1"></textarea> </li>
2. CSS代码:
* { padding: 0; margin: 0; } #container { width: 300px; padding: 10px; border: 1px solid #eee; box-sizing: border-box; } textarea { display: block; width: 100%; font-size: 20px; color: #000; line-height: 24px; outline: none; border: none; resize: none; }
3. JS代码:
var textarea = document.querySelector('textarea') var inpnt = (function () { var baseHeight = null return function () { !baseHeight && (baseHeight = this.scrollHeight) this.rows = 1 var rows = Math.ceil(this.scrollHeight / baseHeight) >= 3 ? 3 : Math.ceil(this .scrollHeight / baseHeight) this.rows = rows } })() textarea.oninput = debounce(inpnt, 100) function debounce(func, delay) { var timer = null return function () { var _this = this var args = arguments timer && clearTimeout(timer) timer = setTimeout(function () { func.apply(_this, args) }, delay) } }
原理
!baseHeight && (baseHeight = this.scrollHeight) this.rows = 1 var rows = Math.ceil(this.scrollHeight / baseHeight) >= 3 ? 3 : Math.ceil(this .scrollHeight / baseHeight) this.rows = rows
第一行 获取基准高度 缓存起
第二行 重点 将textarea的rows设置成1 这样就能得到当前textarea的scrollHeight
第三行 拿到了当前textarea的scrollHeight 就可以算出rows
第四行 设置textarea的rows
通过设置textarea的rows属性来改变textarea的高度。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- csstable列宽固定(css display table 自适应高度、宽度问题的解决)
- 小程序scroll-view自适应高度(小程序瀑布流解决左右两边高度差距过大的问题)
- textarea设置行距(做一个能自适应高度的textarea的示例代码)
- iframe向子页面发送消息(使用postMessage让 iframe自适应高度的方法示例)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
热门推荐
- mysql查看慢查询(MySQL 慢查询日志深入理解)
- docker怎么用端口连接容器(使用docker更改容器内root密码的操作)
- 护卫神主机管理系统(护卫神主机大师如何开启和关闭主机管理系统?)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- sqlserver索引策略(SQLServer性能优化--间接实现函数索引或者Hash索引)
- docker常用命令详解(docker常用命令总结推荐)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- sql死锁进程保护(SqlServer查询和Kill进程死锁的语句)
- linux中dir命令怎么用(Linux sar命令使用方法及代码实例解析)
- 404页面如何设置