Question

<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浏览器中仍然可以正常运行，然后使用type="number"不支持Firefox。

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

Answer 1

尝试b更改模式，

                          <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"
                          />

Answer 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();
          } 
        }}
      />
)

React Js输入type =“ number”在Firefox中不起作用

2 个答案: