ReactJs阻止输入类型编号中的e和dot [英] ReactJs prevent e and dot in an input type number

问题描述

我想阻止 e 和。输入<输入类型=数字/> 。没有jQuery或使用步骤属性。
我试过 pattern =[0-9]但它没有用。

I would like to prevent e and . to be type in an <input type="number"/>. Without jQuery or using step attribute. I've tried with pattern="[0-9]" but it's not working.

编辑：
焦点时，键盘应该是一个数字键盘。

EDIT : On focus the keyboard should be a digit keyboard.

推荐答案

我找不到解决办法阻止 e 和。输入< input type =number/ > 但是如果我们使用< input type =tel/> 它会在使用手机时显示数字键盘并防止输入 e 和。。 这里的小提琴

I couldn't find a solution to prevent e and . to be type in an <input type="number"/> but if we use <input type="tel"/> it will show a digit keyboard when using a mobile phone and prevent e and . to be typed. Here's fiddle

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 type="tel" value={this.state.value} onChange={this.onChange} />
  }
}

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

这篇关于ReactJs阻止输入类型编号中的e和dot的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！