实现textarea自动撑开

需求设想

实现一个具有默认高度，且随着输入内容的增加自动撑开高度的输入框

技术支持

• visibility: hidden; 隐藏DOM但是仍然占位
• contenteditable="true" 为div添加属性可以模拟输入

方法

div模拟textarea实现

HTML:

    {{divInputValue}}


CSS:
.full-test{
    width: 100%;
    min-height: 40px;
    height: auto;
    overflow: auto;

    border: 1px solid black;
    outline: none;
}

JS:
export default {
    data () {
        return {
            divInputValue: ''
        }
    }
}

这种方式能实现，但是有一个问题，在我的vue项目中，只要一刷新就会失效，必须重新跑服务

用隐藏的p标签撑开高度

HTML:

    

        {{textareaValue}}
    
    


CSS:
.full-box
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative;

        p
            margin: 0;
            padding: 0;
            visibility: hidden;
            word-wrap: break-word;
            line-height: 1.16rem;
            min-height: 30px;

        textarea
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: left;
            line-height: 1.15rem;
            margin: 0;
            padding: 0;
            
JS:
export default {
    data () {
        return {
            textareaValue: ''
        }
    }
}

这种方式的实现思路是textarea跟随父元素高度，同时用兄弟原色撑开父元素即可

值得注意的点是p标签与textarea的文字设置需要一致

组件封装

/**
 * 实现随着输入内容增多，自动增高的输入框
 * 父组件调用示例:
 * 
 * @time: 2018.9.20
 * @Author: Nick_yangxiaotong
 */