onKeyUp设置为只能输入数字，但是在输入中文后，再输入数字，无法通过校验

onKeyUp设置为只能输入数字，但是在输入中文后，再输入数字，无法通过校验问题解决

问题描述

今天遇到个bug，onKeyUp设置为只能输入数字，但是在输入中文后，再输入数字，无法通过表单校验。

---

原因分析：

在实现只能输入数字的功能时，如果使用onKeyUp事件来限制输入，并且遇到在输入中文之后再输入数字导致校验失败的情况，这可能是由于输入法的处理机制所致。当用户先输入中文字符后，即使随后切换到英文或数字输入，某些浏览器或输入环境下可能仍然认为处于“非纯数字”输入状态，导致数字输入被错误地拦截。

---

解决方案：

1、使用正则表达式验证：

在onKeyUp事件中，不仅仅简单阻止非数字输入，而是允许所有输入，然后在每次输入后使用正则表达式检查输入框的值，确保其只包含数字。这样可以更灵活地处理输入顺序问题。

inputElement.onkeyup = function() {
  this.value = this.value.replace(/[^0-9]/g, '');
};

2、监听composition事件：

考虑到输入法的组合输入（如中文输入），可以利用compositionstart和compositionend事件来判断是否处于IME（输入法编辑器）的输入过程中。在compositionstart时忽略键盘事件，避免干扰输入法；在compositionend后进行数字校验。

let composing = false;

inputElement.addEventListener('compositionstart', function() {
  composing = true;
});

inputElement.addEventListener('compositionend', function() {
  composing = false;
  // 在这里进行数字校验和处理
  this.value = this.value.replace(/[^0-9]/g, '');
});

inputElement.addEventListener('keyup', function(event) {
  if (!composing) {
    // 如果不是在组合输入中，则进行数字校验
    this.value = this.value.replace(/[^0-9]/g, '');
  }
});

3、使用input事件替代onKeyUp:

input事件在输入框内容发生变化时触发，无论是通过键盘、复制粘贴还是其他方式。相比onKeyUp，它能提供更及时和全面的反馈。结合正则表达式进行校验，可以更准确地控制输入内容。

inputElement.addEventListener('input', function() {
  this.value = this.value.replace(/[^0-9]/g, '');
});

在使用Element UI（或简称Elment）的组件时遇到类似问题，即希望限制输入框只接受数字，但发现输入中文后再输入数字时校验失效，可以采取以下专门针对Element UI的解决方案：

方法 1: 使用v-model.number和@input事件

Element UI 提供了对v-model.number的支持，可以直接将输入转换为Number类型，但这不直接解决输入法导致的问题。结合@input事件来清理非数字输入会更加有效。

<template>
  <el-input
    v-model.number="numberValue"
    @input="handleInput"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      numberValue: null,
    };
  },
  methods: {
    handleInput(value) {
      // 这里使用正则表达式确保只有数字被保留
      this.numberValue = value.replace(/\D/g, '');
    },
  },
};
</script>

方法 2: 利用element-ui的type="number"属性

直接设置type="number"可以原生限制输入为数字，但请注意这在某些情况下可能不完全符合需求，比如在需要兼容特定格式或有特殊要求时。

<el-input type="number" v-model="numberValue"></el-input>

方法 3: 结合Composition API（Vue 3）

如果你使用的是Vue 3，并且倾向于Composition API，可以这样处理：

<template>
  <el-input v-model="numberValue" @input="onInput" />
</template>

<script setup>
import { ref } from 'vue';

const numberValue = ref('');

const onInput = (event) => {
  numberValue.value = event.target.value.replace(/\D/g, '');
};
</script>

记录下遇到问题的解决办法