zoukankan      html  css  js  c++  java
  • 简单实现一个textarea自适应高度

    textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度。

    预览地址:textarea

    我们知道textarea有个rows的属性,改变rows的值可以改变textarea的高度,至于怎么改变不做探究, 所以思路就来了:当文本输入的时候,动态给textarea赋值rows, rows自会导致textarea的高度改变

    接下来,问题就来了,如何动态获取rows的值?首先我们先看一下textarea与rows, cols以及浏览器的的关系是怎样的?可以参考张大神的文章HTML textarea cols,rows属性和宽度高度关系研究

    猜测你已经看完了,大概得出一个结论就是:textarea高度 ≈ lineHeight * rows. 这样思路就更清晰了。看代码

    
    resizeHeight(elem, style) {
      elem.removeAttribute('rows')
      elem.style.height = 'auto'
      const { scrollHeight } = elem
      const { lineHeight, paddingTop, paddingBottom } = style
      let rowsNum = Math.round((scrollHeight - paddingTop - paddingBottom) / lineHeight)
      elem.setAttribute('rows', rowsNum)
    },
    

    原理很简单,获取到元素的scrollHeight(即元素真实高度), 与元素的行高求商,四舍五入。有同学说,直接把scrollHeight赋值给元素不就行了,这么麻烦,说的好有道理。是不是这样

    
    const { scrollHeight } = elem
    elem.style.height = `${scrollHeight}px`
    

    貌似好像也行呀,pc站好像没问题,不过笔者在移动端测试的时候删除的时候,貌似有点小问题。换成改成获取rows的方法就好了。

    如果textarea设置padding的话,需要减去上下padding的值,代码中也有体现。

    有问题欢迎交流,最后附上源码。

    查看源码:源码

    来源:https://segmentfault.com/a/1190000016234169

  • 相关阅读:
    vSphere 6.5支持512e,NVMe SSD呢?
    分布式队列神器 Celery
    www.coursera.org
    各种编码UNICODE、UTF-8、ANSI、ASCII、GB2312、GBK详解
    SSD S.M.A.R.T
    2018世界人工智能大会在上海开幕
    ER TO SQL语句
    E-R图样例
    关于微软的.NET版本系列
    ArcGIS 10.6 安装破解教程
  • 原文地址:https://www.cnblogs.com/datiangou/p/10144748.html
Copyright © 2011-2022 走看看