contenteditable光标解决方案（待优化）

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

input的视觉效果

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

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

div模拟input的视觉效果

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

  

    

      户籍地址：
      

        

          

        
      
    
  

再来看看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代码：

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