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. 回车发送输入框内容
    

   <div class="input-msg"
       v-text="innerText"
       ref="msg"
       contenteditable="plaintext-only"
       @input="changeText"
       @keydown.enter.prevent="enterMsg"></div>
   <!-- 设置keydown事件，Ctrl+Enter同理 -->

    

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）

   <template>
     <div class="input-msg"
          ref="msg"
          contenteditable="plaintext-only"
          @input="changeText"
          @keydown.enter.prevent="enterMsg"></div>
   </template>
   
   <script>
   export default {
     name: 'editDiv',
     props: {
       value: {
         type: String,
         default: ''
       }
     },
     watch: {
       value(newvalue) {
         console.log(newvalue);
         // if (!this.isLocked && !this.innerText) {
         if (!newvalue) {
           // 清空节点内所有html来清空文本
           this.$refs.msg.innerHTML = '';
         } else {
           this.keepLastIndex(this.$refs.msg);
         }
       }
     },
     methods: {
       changeText(event) {
         this.$emit('input', this.$el.innerHTML);
       },
   
       enterMsg(event) {
         this.$emit('send');
       },
       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();
         }
       }
     }
   };
   </script>
   
   <style scoped>
   .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;
   }
   
   .input-msg:focus {
     border: 0;
     outline: 0;
   }
   
   .input-msg:empty:before {
     content: '';
   }
   </style>

   
   
   调用组件

   <template>
     <div id="app">
       <div class="box scroll-hover"
            ref="list">
         <p v-for="(item, index) in msglist"
            :key="index">
           {{ item.id }}. {{item.msg}}
         </p>
       </div>
       <div class="sendmsg">
         <edit-div v-model="inputmsg"
                   @send="send"></edit-div>
       </div>
       <textarea name=""
                 id=""
                 resize="none"
                 v-model="tips"></textarea>
     </div>
   </template>
   <script>
   export default {
     name: 'app',
     components: {
       EditDiv: () => import(/* webpackChunkName: "editdiv" */ '@/components/EditDiv.vue')
     },
     data() {
       return {
         inputmsg: '',
         msglist: [],
         index: 0,
         tips: ''
       };
     },
     watch: {
       inputmsg: function(newvale) {
         console.log('bbb');
       }
     },
     methods: {
       send() {
         let blank =
           this.inputmsg.split(' ').every(n => {
             return /^(&nbsp;)+$/.test(n); // 针对空格为&nbsp;的情况
           }) || this.inputmsg.trim().length === 0; // 普通空格的情况
   
         if (blank) {
           this.tips = '内容不能为空';
           return;
         }
         this.msglist.push({
           id: this.index++,
           msg: this.inputmsg
         });
   
         this.inputmsg = '';
         this.tips = '发送成功';
         this.$nextTick(() => {
           this.$refs.list.scrollTop = this.$refs.list.scrollHeight;
         });
       }
     }
   };
   </script>
   <style>
   #app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
     margin: 0 auto;
     width: 1000px;
   }
   ::-webkit-scrollbar {
     width: 4px;
     height: 4px;
   }
   ::-webkit-scrollbar-thumb {
     background: rgba(48, 48, 48, 0);
     border-radius: 5px;
     height: 30px;
     transition: all 0.4s ease-out;
   }
   /* 鼠标移入出现滚动条，移出隐藏效果 */
   .scroll-hover {
     overflow: scroll;
   }
   .scroll-hover:hover::-webkit-scrollbar-thumb {
     background: rgba(48, 48, 48, 0.4);
   }
   .sendmsg {
     width: 300px;
     line-height: 30px;
     display: flex;
   }
   .inputm {
     word-break: break-all;
     width: 200px;
     min-height: 40px;
     resize: none;
   }
   </style>