ReactJs 防止输入类型编号中的 e 和点

Question

我想防止e并.输入<input type="number"/>. 没有 jQuery 或使用step属性。我试过，pattern="[0-9]"但它不起作用。

编辑：焦点键盘应该是数字键盘。

Answer 1

这是我使用的最佳验证。我们用replace方法删除任何不是数字的符号。输入类型需要是文本。在其他情况下，它可能会产生意想不到的效果。

  const [val, setVal] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={val}
        onChange={e => setVal(e.target.value.replace(/[^0-9]/g, ""))}
      />
    </div>
  );

Codesandbox演示。

如果您不擅长正则表达式，您也可以使用第二种变体。

 // Outside of function
 const exceptThisSymbols = ["e", "E", "+", "-", "."];

 //..
  return (
    <div className="App">
      <input
        type="number"
        onKeyDown={e => exceptThisSymbols.includes(e.key) && e.preventDefault()}
      />
    </div>
  );

Codesandbox演示。

Answer 2

'e' 是数字字段中唯一可接受的字母，因为它允许使用指数。您可以使用，input type="text"但它不会为您提供浏览器的原生向上和向下箭头type="number"。并且该pattern属性在提交时进行验证，但不会阻止某人首先输入“e”。在 REACT 中，您可以使用它来完全阻止在数字输入中键入“e”键：

<input type="number" onKeyDown={ (evt) => evt.key === 'e' && evt.preventDefault() } />

Answer 3

使用 React 你可以做类似的事情：

class Test extends React.Component {
   constructor(){
      super();
      this.state = {value: ''};
      this.onChange = this.onChange.bind(this)
   }

   onChange(e){
      const re = /^[0-9\b]+$/;
      if (e.target.value == '' || re.test(e.target.value)) {
         this.setState({value: e.target.value})
      }
   }

   render(){
     return <input value={this.state.value} onChange={this.onChange}/>
   }
}

React.render(<Test />, document.getElementById('container'));

这是小提琴。