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的高度。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- iframe向子页面发送消息(使用postMessage让 iframe自适应高度的方法示例)
- textarea设置行距(做一个能自适应高度的textarea的示例代码)
- 小程序scroll-view自适应高度(小程序瀑布流解决左右两边高度差距过大的问题)
- csstable列宽固定(css display table 自适应高度、宽度问题的解决)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
热门推荐
- 给页面加上运行代码功能
- php语言程序设计基础面向对象(PHP面向对象程序设计之对象的遍历操作示例)
- docker搭建mysql服务(Docker部署Mysql集群的实现)
- mysql binlog模式实际使用(实例验证MySQL|update字段为相同的值是否会记录binlog)
- dedecms表单格式(DedeCMS arclist的分页使用教程)
- python sql注入怎么避免(Python实现SQL注入检测插件实例代码)
- IT技术类在团队管理上的几个建议
- jquery隐藏动画教程(jquery插件实现鼠标隐藏)
- pythonfor循环嵌套if语句(Python基础教程之if判断,while循环,循环嵌套)
- python线程池有几种(对python 多线程中的守护线程与join的用法详解)