方法
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的高度。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
网友评论