利用contenteditable模拟input/textarea的可编辑文本，placeholder，限制长度，自适应高度等。

html，css真是神奇。应产品需求。需要做一个自适应，内容完整展示的可编辑输入框。textarea，input都是不合适。如是发现html有个神奇的属性contenteditable。

先看看效果：

下面贴代码：

 <p class="bot-item buy-message flex-space-between">
   <i>买家留言：</i>
   <span contenteditable="true" @keyup="checkLimitLength($event)" class="textarea-content" placeholder="填写与商家协商好的内容(选填)"></span>
</p>

.bot-item {
            padding: .3rem 0;
            border-bottom: solid 1px #f3f3f3;

            i {
                font-style: normal;
                padding-top: 0.02rem;
            }
            .textarea-content{
                flex:1;
                outline:none;
                word-break: break-all;
                line-height: 0.32rem;
                &:empty:before{
                    // 模拟palceholder
                    content: attr(placeholder);
                    color: #999999;
                    font-size: 0.28rem;
                }
                &:focus:before{
                    // 模拟palceholder 聚焦
                   content: none;
                }
            }

checkLimitLength: debounce(500, function(el) {
            //keyup防抖
            let limitText = el.target.innerHTML;
            let limitLen = el.target.innerHTML.length;
            if(el.target.innerHTML == ''){
                // 模拟删除文本为空后，显示placeholder
                el.target.blur();
            }
            if(limitLen > 200){
                // 字数超过200，光标失焦。不可再输内容
                el.target.blur();
                el.target.innerHTML = limitText.substr(0, 200);
            }
            this.remarks = el.target.innerHTML.substr(0, 200);
            // console.log(this.remarks,limitLen,'limitLen*');
            // debugger;
        })

 tips：remarks留言提交的时候传给后端即可。这里不需要双向绑定，防抖debounce是封装的方法，百度就有

效果：

 

文本清空后，也显示了placeholder。

 

还有一种大佬帮写的js，判断光标是否聚焦。显示placeholder等。可借鉴。vue的动态绑定更改即可。暂未尝试。效果类似。