html自适应代码实例,做一个能自适应高度的textarea的示例代码

方法

1. HTML结构：

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的高度。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。