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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！