业务场景：在表单的输入框中input的元素中由于输入内容过长并不能很好的实现填写内容拖拉效果，便于检查用户输入是否出错

input的视觉效果

实现效果：能够自由拖拽查看填写内容

动态效果图就不放了，手机太low录屏效果差

div模拟input的视觉效果

先看下代码结构class=inputContent的元素设置contenteditable属性为true并给此元素绑定input事件，内部再嵌套一个p元素
p元素来作为可以编辑内容的包裹元素

  <div id="simulation">
    <div class="fr-cell">
      <span class="fr-cell-title">户籍地址：
      <div class="fr-cell-value">
        <div class="inputContent" ref="editor" contenteditable="true" @input="changeText">
          <p></p>
        </div>
      </div>
    </div>
  </div>

再来看看style样式class=inputContent的宽度要比父元素大，并将父元素宽度固定

#simulation .fr-cell {
    height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
  }
  #simulation .fr-cell-title{
    margin-right: 10px;
  }
  #simulation .fr-cell-value{
    flex: 1;
    display: flex;
    align-items: center;
    height: 50px;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  #simulation .fr-cell-value .inputContent{
    outline: none;
    height: 24px;
    line-height: 24px;
    width: 200%;
    white-space: nowrap;
  }
  #simulation .inputContent p{
    margin: 0;
    padding: 0;
    height: 24px;
    line-height: 24px;
  }

最后是js代码：

<script>
  export default {
    name: 'simulation',
    data () {
      return {
        val: 'Lorem ipsum'
      }
    },
    mounted () {
      this.$refs.editor.firstChild.innerText = this.val
    },
    methods: {
      changeText (e) {
        this.val = e.target.firstChild.innerText
      }
    }
  }
</script>

重点：在于使用contenteditable属性的内部添加一个p元素来放置编辑的内容，若没有内部没有p元素则会出现我们熟悉的contenteditable属性元素的光标问题。