input 键盘输入

调起数字键盘

// ios端bug：弹窗数字键盘但可以输入非数字字符
<template>
  <input :type="type" v-model="data" @focus="changeType(0)" @blur="changeType(1)" @input="change(data)" ref="input" />
</template>

<script>
export default {
  data() {
    return {
      data: '',
      type: 'number',
    };
  },
  methods: {
    changeType(type) {
      this.type = type === 1 ? 'number' : 'text';
    },
    change(val) {
      val = val.replace(/(^\s*)|(\s*$)/g, '');
      if (!val) {
        this.data = '';
        return;
      }
      const reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, '');
      // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, '');
      // 小数只能出现1位
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      this.data = val;
    },
  },
};
</script>