简单实现一个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的值,代码中也有体现。
有问题欢迎交流,最后附上源码。
查看源码:源码
来源:https://segmentfault.com/a/1190000016234169
简单实现一个textarea自适应高度的更多相关文章
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
- js实现textarea自适应高度
html结构: <div class="container" id="container"> <div class="text-wr ...
- jquery文本框textarea自适应高度
浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id=&quo ...
- textarea 自适应高度
试了好多方法,包括百度了好多.一旦接口获取的内容,就不好用了.有时候就是脑袋转不过来,想了好久的方法居然那么简单,然后,脑洞大开,忽然想到还可以这样弄, 很简单,两句话 var textareaHei ...
- Textarea自适应高度 JS实现,兼容IE6\7\8\9\10\11
<!DOCTYPE html> <html> <head> <title>autoresizing textarea</title> < ...
- “自适应”高度的 textarea 文本输入框
写在前面 那啥,在我的那个很安静的一个 CSS 群(群号:82991297)突然看到有人在问一个问题. 使用 css 如何实现:textarea 如何实现高度自适应? 当时看到这个问题的时候,我脑中只 ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
随机推荐
- SpringToolSuit(STS)添加了Lombok后仍然报错
参见这篇博客 https://blog.csdn.net/qq_27442469/article/details/90612918 上面步骤做完后,在项目右键->Maven->Update ...
- 如何用git将本地代码上传github
其实去年就用github了,但是毕竟也只是在上面搜索一些工作的难点和自我学习,自己都没有贡献过代码,觉得确实很low,知道今天自己用了2周左右的时间开发了 微信小程序,有了自己的贡献代码,所以想上传到 ...
- 关于本地使用antd的upload组件上传文件,ngnix报错405的问题
使用阿里的ui框架antd的upload,会自动请求ngnix上面的一个路径,也就是action所在的位置,一直报错405 not allowed,后来经讨论,统一将action写成一个路径,后端对这 ...
- CSS3——PC以及移动端页面适配方法(流体布局)
流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...
- 词根——rect
词根rect:直 线索链 来源于简单词right righta.正确的,直的,右的 (正和直是不分的)n. 右,权利ad.正确地,在右边 rectifyv. 纠正,整顿把它直起来 rect+ify=直 ...
- HTML和CSS实现的透明登录框效果
实现代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- java构造方法和重写equals
Cell的构造函数 package Test; import java.util.Objects; public class Cell { int a; int b; public int getA( ...
- Manacher模板( 线性求最长回文子串 )
模板 #include<stdio.h> #include<string.h> #include<algorithm> #include<map> us ...
- [CF342C]Cupboard and Balloons 题解
前言 博主太弱了 题解 这道题目是一个简单的贪心. 首先毋庸置疑,柜子的下半部分是要放满的. 于是我们很容易想到,分以下三种情况考虑: \[\small\text{请不要盗图,如需使用联系博主}\] ...
- Android CPU使用率:top和dump cpuinfo的不同
CPU是系统非常重要的资源,在Android中,查看CPU使用情况,可以使用top命令和dump cpuinfo.我记得很久以前,就发现这两者存在不同,初步猜测应该是算法上存在差异.最近需要采集应用C ...