Vue 使用div contenteditable属性模拟输入框

使用div模拟输入框的原因：input不能让文本换行、textarea高度始终固定需要配合js才能自适应文本高度，使用div模拟输入框，可以让高度自适应文本内容。

首先还是先介绍一下相关属性：

contenteditable：true | false | plaintext-only 

                     true: 富文本编辑（可粘贴html格式的）

                     false: 不可编辑

                     plaintext-only: 纯文本编辑

 user-modify:  read-only | read-write | write-only(基本浏览器都不支持) | read-write-plaintext-only

                     read-only: 内容只可读

                     read-write：可读写（带有html样式的）

                     read-write-plaintext-only: 可读写，但是丢失粘贴文本的样式（纯文本）

 user-modify和contenteditable具有相同的效果，只需要设置一个即可，目前只有webkit内核浏览器支持read-write-plaintext-only这个值，因此使用时其实是：

-webkit-user-modify: read-write-plaintext-only

contenteditable="plaintext-only"和CSS的-webkit-user-modify: read-write-plaintext-only一样

常见问题

1. 光标位置一直在最前面的问题

   keepLastIndex(obj) {
     if (window.getSelection) {
       //ie11 10 9 ff safari
       obj.focus(); //解决ff不获取焦点无法定位问题
       var range = window.getSelection(); //创建range
       range.selectAllChildren(obj); //range 选择obj下所有子内容
       range.collapseToEnd(); //光标移至最后
     } else if (document.selection) {
       //ie10 9 8 7 6 5
       var range = document.selection.createRange(); //创建选择对象
       //var range = document.body.createTextRange();
       range.moveToElementText(obj); //range定位到obj
       range.collapse(false); //光标移至最后
       range.select();
     }
   }

    

2. 回车发送输入框内容
    

    

3. 内容无法清空。监听文本的内容，监听到空的时候清空div节点内的html。
    

   watch: {
       value(newvalue) {
           if (!newvalue) 
               // 清空节点内所有html来清空文本
               this.$refs.msg.innerHTML = '';
           } else {
               this.keepLastIndex(this.$refs.msg);
           }
       }
   },

   
   
    
4. 清空内容后无法再次聚焦的问题。原因：可能是css没有设置最小高度，清空内容后导致高度崩塌。解决方法：添加min-height属性.
    

   .input-msg {
       line-height: 17px;
       min-height: 17px;
       border: 0;
       display: block;
       flex: 1;
       width: 0;
       max-height: 57px;
       overflow-y: scroll;
       overflow-x: hidden;
       background-color: #f9f8fa;    
       padding: 2px 2px 0 2px;
       user-select: text;
       -webkit-user-modify: read-write-plaintext-only;
   }

   
   
    
5. 空格的判断，chrome70与chrome49的空格存在区别，chrome70是正常的空格符而chrome49为 
    

   let blank =
           this.inputmsg.split(' ').every(n => {
               return /^( )+$/.test(n); // 针对空格为 的情况
           }) || this.inputmsg.trim().length === 0; // 普通空格的情况

   结合一下上述代码（vue）
   
   
   调用组件