H5移动端开发输入框光标总会跳到末尾问题

程序猿的疑惑

有这样一个简单的需求：用户充值话费，在输入框里输入手机号。
但是就是这样一个简单的需求确有一个烦人的bug，当点击手机号中间任意位置执行删除时光标会自动跳转到末尾位置，用户体验极差。

光标位置的控制

解决这个问题需要用到光标位置的控制HTMLInputElement.setSelectionRange()
使用方法：

element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
selectionStart：第一个被选中的字符的序号（index），从0开始。
selectionEnd：被选中的最后一个字符的前一个。换句换说，不包括index为selectionEnd的字符。
selectionDirection：选择的方向。可选值为forward、backward或none。

解决方案A

首先先在组件里使用vue的事件修饰符截取删除事件

<van-field
          ref="van"
          v-model="phoneNum"
          class="numberInput"
          pattern="[0-9]*"
          type="text"
          clearable
          maxlength="13"
          :right-icon="perImg"
          placeholder="请输入手机号"
          @keydown.delete="FieldDelete"
        />

首先需要获取光标的当前位置，使用selectionStart属性。
注意：这里的光标位置操作需要写在计时器里，因为光标操作如果在删除之前进行就会失效，使用异步就可以解决这个问题

// 手机号输入框删除事件
    FieldDelete(e) {
      // 获取光标当前位置
      let Elelct=e.srcElement.selectionStart;
      setTimeout(()=>{
        e.srcElement.setSelectionRange(Elelct-1,Elelct-1)
      },1)   
    },