做一个能自适应高度的textarea的示例代码
发布时间：2019-09-06 16:02:17 作者：卡米撒吗 
我要评论
我要评论这篇文章主要介绍了做一个能自适应高度的textarea的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
方法
1. HTML结构：
<div id="container">
<textarea rows="1"></textarea>
</div>
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的高度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
这篇文章主要介绍了如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度的相关资料,需要的朋友可以参考下2019-08-01textarea文本域宽度和高度width及height自动适应实现代码
本文为大家介绍下textarea文本域宽度和高度（width、height）如何自动适应变化处理，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-30- textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。2010-12-27
- 用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条.2009-07-11
最新评论