React Js输入类型=“数字”在Firefox中不起作用答案

【问题标题】：React Js input type="number" not working in firefoxReact Js输入类型=“数字”在Firefox中不起作用
【发布时间】：2019-09-17 11:47:52
【问题描述】：

<Form.Input
    type="number"
    pattern="[1-9]"
    disabled={renderDisableInput(
        this.state.user.role
    )}
    placeholder="Phone"
    required={true}
    value={this.state.phone}
    onChange={this.handleChange}
    name="phone"
/>

上面的代码在 Chrome 浏览器中仍然运行良好，然后来到 Firefox 中 type="number" 不支持。

输入字段允许所有类型的文本关键字。我的代码有什么错误？

【问题讨论】：

Firefox 确实支持。是否呈现了某些内容，或者您的控制台中是否出现错误？很难说返回什么
Firefox 从版本 23 开始支持 <input type="number">。developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…

标签： javascript reactjs validation

【解决方案1】：

尝试改变你的模式，

                          <Form.Input
                            type="number"
                            pattern="/[0-9]+/"
                            disabled={renderDisableInput(
                              this.state.user.role
                            )}
                            placeholder="Phone"
                            required={true}
                            value={this.state.phone}
                            onChange={this.handleChange}
                            name="phone"
                          />

【讨论】：

仍然允许使用字母数字

【解决方案2】：

在下面的示例中，您可以防止字符。

import { includes } from 'lodash';
const alphabets = [
'a','b','c','d','f','g','h','i','j','k','l', 'm','n','o','p','q','r','s','t',
'u','v','w','x','y','z','A','B','C','D', 'F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
];

    return (
        <input
        type="number"
        value={value}
        onKeyDown={(e) => {
          if (includes(alphabets, e.key)) {
            e.preventDefault();
          } 
        }}
      />
)

【讨论】：