contenteditable 仿造input 光标定位

背景：在初次使用contenteditable写可输入的div模块，当需求要求输入限制字数，还要光标正常的情况来模拟input

直接上demo，用vue写的（框架不重要），demo中用了vant的toast,css注意下是sass

如果你了解vue,可以直接搭建一个demo项目，然后复制下下面的代码运行起来就能看到效果
搭建demo可以参考我之前的文章https://segmentfault.com/a/11...

<template>
  <div class="edit-content-wrap">
    <div
      class="edit-content thin-scroll"
      contenteditable="true"
      ref="edit-content"
      placeholder="Ctrl+V 可粘贴文字"
      @keydown="inputChecked"
      @keyup="inputLength"
    >{{ comm_info }}</div>
    <div class="edit-footer">
      <div class="edit-footer-part-3">
        <span>{{ currentLength }}</span>
        /
        <span>10</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
  name: 'Input',
  components: {},
  data() {
    return {
      comm_info: '',
      currentLength: 0
    };
  },
  mounted() {
  },
  methods: {
    inputChecked(e) {
      //Backspace键8 F5键116 37~40方向箭头 Del键46
      if (
        e.target.innerText.length >= 10 &&
        e.keyCode !== 8 &&
        e.keyCode !== 116 &&
        e.keyCode !== 37 &&
        e.keyCode !== 38 &&
        e.keyCode !== 39 &&
        e.keyCode !== 40 &&
        e.keyCode !== 46
      ) {
        e.preventDefault();
      }
    },
    inputLength(e) {
      if (e.target.innerText.length > 10) {
        Toast.fail('最多可输入10字');
        e.target.innerText = e.target.innerText.substring(0, 10);
        this.getInputSelection(e.target);
      }
      this.currentLength = e.target.innerText.length;
    },
    /**
     * 获取输入的光标到字符串最后一位
     * @param {obj} obj
     */
    getInputSelection(obj) {
      //处理光标问题
      if (window.getSelection) { //ie11 10 9 ff safari
        // obj.focus(); //解决ff不获取焦点无法定位问题
        let range = window.getSelection(); //创建range
        range.selectAllChildren(obj); //range 选择obj下所有子内容
        range.collapseToEnd(); //光标移至最后
      } else if (document.selection) { //ie10 9 8 7 6 5
        let range = document.selection.createRange(); //创建选择对象
        //var range = document.body.createTextRange();
        range.moveToElementText(obj); //range定位到obj
        range.collapse(false); //光标移至最后
        range.select();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-content-wrap {
  width: 100%;
  border: 1px solid #dddddd;
  .edit-content {
    outline: none;
    min-height: 124px;
    width: 100%;
    text-align: justify;
    padding: 7px 10px;
    word-wrap: break-word;
    word-break: break-all;
    overflow-y: auto;
    &:empty::before {
      content: attr(placeholder);
      color: gray;
    }
  }
  .edit-footer {
    height: 36px;
    background: #f7f9fa;
    border-top: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .edit-footer-part-3 {
      .follow-small-height {
        width: 120px;
      }
    }
  }
}
</style>