【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）

在Vue中的项目，基于VUX-UI开发，一个常见的需求：

1、金额输入框

2、弹出数字键盘

3、仅支持输入两位小数，限制最大11位数，不允许0开头　　

 

后续：与UI沟通后， 思路调整为限制输入，并减少正则替换输入值出现的闪动。后续改动如下，注意点如下：

1、处理思路

　　A。在用户输入的键盘事件中，对于不符合的输入，阻止默认行为和事件冒泡。

　　　　不符合输入的规则如下：

　　　　1）当前输入框中的长度大于等于配置的max

　　　　2）非数字和小数点

　　　　3）当前输入框中已存在小数点，或第一位输入小数点

　　B。在获取值后，对于不符合两位小数的值，用watch正则替换后，再下一次渲染（会出现先12.000到12.00的闪动）

 

2、阻止键盘事件在哪个阶段？

　　keypress。

　　因为keydown和keyup得到的是keyEvent中键值是原始的组合键值，需要判断不同环境和浏览器对keycode的实现不同以及是否有shift/alt等。比如在IOS中keydown，对于字符$ @，keycode都是0；中文键盘和英文键盘中的数字keycode不一致。

　　而kepress得到的是组合解析后的实际值，android和ios大部分表现一致。

3、Android的数字键盘中的小数点的特殊处理

　　调试发现，安卓的数字键盘中，小数点做了特殊处理：

　　　　1）无法捕获到keypress事件

　　　　2）keydown事件中keEvent的keycode是0，无法用于判断

　　　　3）keydown事件中keEvent的keyIdentifier === 'U+0000'

　　　　4）在keydown事件以及keyuup或其它事件中， 用preventDefault和stopPropagation阻止默认行为和事件冒泡，不能阻止input框输入小数点.

　　　　所以对这个问题处理，只能沿用之前用在watch中处理空值问题的思路。

 

4、最终效果

　　IOS中默认拉起含特殊字符的数字键盘，对于非法输入不会出现任何闪动，对于长度越界的会出现闪动

　　Andriod中默认拉起九宫格数字键盘，没有特殊字符，小数点会出现闪动，对于长度越界的会出现闪动

　　

View Code

 

第一，首先想到额就是在VUX-UI中制定type=number。--不可行

　　VUX中的文档和代码说明，type=number不支持maxLength，会报错，而且没有正则替换的处理或者钩子函数，只有输入后提示校验信息。

第二，基于VUX中XInput封装，有如下问题

　　1）两层v-model，正则替换的值不会触发input框渲染

　　解决：currentValue赋值为foramttedValue，放入setTimeout(func ,0)中，让input框先渲染为正则替换前的值，再渲染为替换后的值

    currentValue(val, oldVal) {
      // 调用filter过滤数据
      let formattedValue = this.filter(val);
      if (this.type === 'number') {
        formattedValue = this.typeNumberFilter(formattedValue, oldVal);
      }
      if (val !== formattedValue || val === '') {
        setTimeout(() => {
          this.currentValue = formattedValue;
        }, 0);
      }
      this.$emit('input', formattedValue);
    },

View Code

　　2）数字键盘input type=number，会导致maxlength失效，无法限制长度

　　解决：用slice(0, max)处理

      if (formattedValue.length > this.max) {
        formattedValue = formattedValue.slice(0, this.max);
      }

View Code

　　3）数字键盘input type=number ，连续输入小数点...导致实际值和显示值不一致

　　解决：用原生的 inputElement.value = oldValue处理

      const inputEle = this.$children[0].$refs.input;
      // TODO: 待大范围验证：处理连续输入..后，type=number的input框会把值修改为''的问题；fastclick导致type=number报错
      // 问题描述： 1.00. 不会触发值改变，1.00.不会触发值改变，1.00.【\d\.】都会把值修改为空字符串''。hack处理的条件说明如下：
      // 1、当校验后是空值，(因input=number，formattedValue为''表明 原始newVal也为''）
      // 2、输入框拿到的是空值（因input=number导致输入框立即被赋予空值。点击清除按钮时，这里input输入框还是上次的值）
      // 3、上次输入大于两位（避免最后一位无法删除的问题。最后一位删除时，oldVal.length === 1）
      if (formattedValue === '' && inputEle.value === '' && oldVal && oldVal.match(/^(\d)[\d.]+/)) {
        formattedValue = oldVal;
      }
      setTimeout(() => {
        inputEle.value = formattedValue;
      }, 0);

View Code

 　　4）IOS中数字键盘有%$*等特殊字符

　　解决：用原生的 inputElement.onkeydown监听事件，非数字和退格和小数点直接return事件

  mounted() {
    if (this.type === 'number') {
      const inputEle = this.$refs.xinput.$refs.input;
      // eslint-disable-next-line
      inputEle.onkeydown = (e) => {
        const keyCode = e.keyCode;
        if (!this.isBackspace(keyCode) && !this.isDot(keyCode) && !this.isNumber(keyCode)) {
          // 其他按键
          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      };
    }
  }

View Code

 

第三，其他说明

　　为什么不用 type=tel？

　　　　type=tel在ios中没有小数点

 

第四，全部代码

 

View Code

 

转载于:https://www.cnblogs.com/smileSmith/p/8178169.html