美文网首页
如何让textarea随着内容自适应高度

如何让textarea随着内容自适应高度

作者: VivaLaVida_692c | 来源:发表于2020-07-27 18:05 被阅读0次

    1.用 div 模拟 textarea, 高度自适应,并且有 placeholder 效果

    (1)、使用 contenteditable 属性,可让 div 具有编辑输入效果

    (2)、模拟 placeholder 的提示效果,此处直接用 CSS 实现

    css html

    (3)、contenteditable 在IOS上有兼容性,虽然能聚焦,但是不能输入内容,此时需要借助属性 -webkit-user-select: text , 来解决这个兼容性

    (4)、缺点:获取 div 文本的时候,内部会包含一些HTML标签,所以需要单独处理转译的数据,才能正常使用数据

    2.用 div 来实现高度自适应,但是输入内容还是再 textarea 标签里面

    (1)、设置一个 div 与 textarea 同层级,外层包裹一个 div ,定位为 relative

    (2)、textarea 绝对定位,宽度高度均为 100%,相对于父层 div 来说

    (3)、内部 div,设置为 relative, 在检测 textarea 的 onchange 事件的时候,把文本填充到内部 div 里面,以此来撑开父层 div 的高度和宽度

    (4)、给内部 div 设置 不可见属性,visibility:hidden,这样 div 是看不见的,但是它的物理位置是存在的,所以能够撑开父层 div

    (5)、该方案相对于方案一来说,更简便和完美,尤其是需要获取输入内容的时候

    html

    相关文章

      网友评论

          本文标题:如何让textarea随着内容自适应高度

          本文链接:https://www.haomeiwen.com/subject/arctrktx.html