解决 input[type=number] 输入中文时光标跳到左上角的问题

在页面使用input标签并且设置type为number时，会出现一个bug，就是输入中文时光标会跳到左上角的位置，下面时解决这个bug的代码：

// 导入防抖函数
import { debounce } from '@/utils';

/**
 * input[type=number] 的补丁，输入中文时光标会跳到左上角
 */

// 创建一个空数组用于存储所有的 input[type=number] 元素
let list = [];

export default {
    mounted() {
        // 在组件挂载完成后执行
        const inputList = this?.$el?.querySelectorAll?.('input[type=number]');

        // 如果存在 inputList，即找到了符合条件的元素
        if (inputList?.length) {
            // 将找到的元素赋值给 list 数组
            list = inputList;
            // 调用 debounce 函数对 list 数组中的元素进行处理
            listDebounce();
        }
    },
};

// 使用 debounce 函数对 list 数组中的元素进行处理，设置一个 300ms 的延迟
const listDebounce = debounce(() => {
    // 遍历 list 数组中的每个 input 元素
    list.forEach(input => {
        // 给每个 input 元素绑定 oninput 事件
        input.oninput = e => {
            // 当输入的值为''且目标值也为''时，将目标值设为'0'
            if (e.data === '' && e.target.value === '') {
                e.target.value = '0';

                // 使用 setTimeout 将目标值设为空字符串
                setTimeout(() => {
                    e.target.value = '';
                }, 0);
            }
        };
    });
}, 300);

这段代码的功能是修复 input[type=number] 在输入中文时导致光标跳到左上角的问题。代码中的注释解释了每个部分的功能和目的：

1.导入了一个名为 debounce 的函数，用于函数节流。
2.在组件的 mounted 钩子函数中，找到所有的 input[type=number] 元素，并将它们存储在 list 数组中。
3.调用 listDebounce 函数，对 list 数组中的元素进行处理。
4.listDebounce 函数使用 debounce 对其内部的处理函数进行节流，设置一个 300ms 的延迟。
5.在 listDebounce 函数中，遍历 list 数组中的每个 input 元素，并为每个元素绑定 oninput 事件。
6.在 oninput 事件处理函数中，如果输入的值为空且目标值也为空，则将目标值设置为 ‘0’，然后使用 setTimeout 将目标值设为空字符串。
7.这段代码通过使用节流函数和对输入元素的处理，解决了输入中文时光标跳到左上角的问题。

上面的实例是vue框架，但解决bug的思路是相同的，在其他框架里面也是一样的思路