html5高度代码,做一个能自适应高度的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的高度。

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