您的位置:首页 > Web前端 > > 正文

textarea设置行距(做一个能自适应高度的textarea的示例代码)

更多 时间:2021-10-05 00:42:08 类别:Web前端 浏览量:799

textarea设置行距

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

方法

1. HTML结构:

  •     <li id="container">
            <textarea rows="1"></textarea>
        </li>
    
  • 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的高度。

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