使用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为&nbsp;
      
    let blank =
        this.inputmsg.split(' ').every(n => {
            return /^(&nbsp;)+$/.test(n); // 针对空格为&nbsp;的情况
        }) || 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>



     

 

 

# css
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue