div标签的contenteditable属性实现input效果以及控制input的聚焦失焦

在触屏(移动端网页)中，聊天室类型的输入框很常见，但是很多都是自定义样式的，直接改造input标签会很麻烦。

• 给div标签设置contenteditable属性可以达到input标签的效果还能轻松的自定义样式。
• 利用input事件和v-text可以达到动态绑定“input”输入框的效果
• 利用focus和blur方法可以控制“input”输入框的键盘展开收起

<div contenteditable="true" ref="inputMsg" v-text="inputText" @input="inputDiv($event)" class="input-txt"></div>

// 监听div的input输入框并赋值
inputDiv (e) {
    this.resInputVal = e.target.innerText.replace(/[\s\r\n]/g, '').trim();
},
this.inputMsg = this.$refs.inputMsg;
this.inputMsg.blur(); // 自动失去焦点收起键盘
this.inputMsg.focus(); // 自动聚焦展开键盘