小程序 银行卡号输入4位自动加入空格符和输入时的光标问题

小程序在输入银行卡号时每四位空一格用replace就可以实现

.replace(/\s/g, ‘’)
.replace(/[^\w./]/g, ‘’)
.replace(/(\w{4})(?=\w)/g, '$1 ');

但是当改变中间某一位时，如果使用setData重新给输入框赋值就会导致光标跳到最后一位，所以要使用cursor属性让光标不乱跑

wxml:

<view>
    <text>银行账号</text>
    <input type="number" value='{{bankCard}}' bindinput='bankCardNoInput' maxlength="23" placeholder="请输入银行账号" cursor="{{cursor}}"></input>
</view>

js:

bankCardNoInput(e) {
  const value = e.detail.value;
  const pos = e.detail.cursor;
  // accountNo 去除空格的数据，提交时使用
  this.setData({
    [`form.accountNo`]: value.replace(/\s/g, ''),
  });
  let newCode = value.replace(/\s/g, '')
    .replace(/[^\w./]/g, '')
    .replace(/(\w{4})(?=\w)/g, '$1 ');
  let posAfterText = '';
  let isNextBlank = false; // 后面的是否是空格
  let isLastPos = true; // 光标是不是在末位
  if (pos !== value.length) {
    // 光标不在末位
    posAfterText = value.substr(pos, 1);
    isNextBlank = /^\s+$/.test(posAfterText);
    isLastPos = false;
  }
  // 删除 backspace
  if (e.detail.keyCode === 8) {
    return {
      value: newCode,
      cursor: e.detail.cursor,
    };
  } else {
    // isLastPos=true 光标在末位时
    if (isLastPos) {
      return {
        value: newCode,
        cursor: pos + 1,
      };
    } else {
      // 如果后面跟着空格
      if (isNextBlank) {
        return {
          value: newCode,
          cursor: pos + 1,
        };
      } else {
        return {
          value: newCode,
          cursor: pos,
        };
      }
    }
  }
},