input type=number解决可以输入字母e的问题

感谢上Di_123

已于 2023-08-18 14:11:16 修改

阅读量318

点赞数

文章标签：前端 javascript input

于 2023-08-18 14:10:23 首次发布

本文链接：https://blog.csdn.net/qq_35770417/article/details/132360628

版权

本文介绍了如何在React中使用AntDesign的InputNumber组件时，添加自定义的onWheel、onPaste和onKeyDown事件处理，以及formatter和parser方法，以实现数字输入框的精确控制和格式化。

摘要由CSDN通过智能技术生成

export const InputCommonAttr = {
  type: 'number',
  onWheel(event: any) {
    /*禁止滚轮可加减输入框的数字*/
    event.preventDefault();
    event.target.blur();
    return false;
  },
  onPaste(event: any) {
    /*防止用户粘贴过来字母e*/
    event.preventDefault();
  },
  onKeyDown(event: any) {
    /*对字母e特殊处理*/
    if ([69].includes(event.keyCode)) {
      event.preventDefault();
      return false;
    }
    return /[\d\.]/.test(String.fromCharCode(event.keyCode));
  },
  formatter(value: any) {
    if (!value) {
      return value;
    }
    /*保留小数点后的两位数字*/
    const arr = value?.split('.');
    if (arr?.length > 1) {
      const str = arr?.[1].substr(0, 2);
      return `${arr?.[0]}.${str}`;
    }
    return `${value}`;
  },
  parser(value: any) {
    return value ? value : null;
  },
};

以上代码使用的背景是：react开发，用的antd的InputNumber组件，具体可以查看官方文档：InputNumber

将上面代码里面的属性都添加到这个组件里面就可以啦。