javascript ReactJs 防止输入类型编号中的 e 和点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45834885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJs prevent e and dot in an input type number
提问by Philippe
I would like to prevent eand .to be type in an <input type="number"/>. Without jQuery or using stepattribute.
I've tried with pattern="[0-9]"but it's not working.
我想防止e并.输入<input type="number"/>. 没有 jQuery 或使用step属性。我试过，pattern="[0-9]"但它不工作。
EDIT : On focus the keyboard should be a digit keyboard.
编辑：焦点键盘应该是数字键盘。
回答by Jeff C
The 'e' is the only letter that's accepted in a number field because it allows for exponents. You could use input type="text"but it doesn't give you the browser's native up and down arrows that type="number"does. And the patternattribute validates on submission but doesn't stop someone from typing the 'e' in the first place. In REACT you can use this to completely block the 'e' key from being typed in a number input:
'e' 是数字字段中唯一可接受的字母，因为它允许使用指数。您可以使用，input type="text"但它不会为您提供浏览器的原生向上和向下箭头type="number"。并且该pattern属性在提交时进行验证，但不会阻止某人首先输入“e”。在 REACT 中，您可以使用它来完全阻止在数字输入中键入“e”键：
<input type="number" onKeyDown={ (evt) => evt.key === 'e' && evt.preventDefault() } />
回答by Boky
With React you could do something like:
使用 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'));
回答by jgard
The best way to handle this is to use the onKeyDownprop (onkeydown in plain html) to check the keyCode when the user uses the keyboard to input a character. If the keyCode for the event is 69 (for 'e') or 190 (for '.'), then you can preventDefault(), preventing the input from being displayed.
处理此问题的最佳方法是onKeyDown在用户使用键盘输入字符时使用prop（纯 html 中的 onkeydown）检查 keyCode。如果事件的 keyCode 是 69（对于 'e'）或 190（对于 '.'），那么您可以preventDefault()阻止显示输入。
<input
type="number"
onKeyDown={ e => ( e.keyCode === 69 || e.keyCode === 190 ) && e.preventDefault() }
/>
回答by JulienRioux
Here is a pretty robust solution to prevent the characters that are not numbers ("e", ".", "+" & "-") !
这是一个非常强大的解决方案，可以防止出现不是数字的字符（“e”、“.”、“+”和“-”）！
import React, { Component } from "react";
class MyComponent extends React.Component {
state = { numInput: "" };
handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
formatInput = (e) =>?{
// Prevent characters that are not numbers ("e", ".", "+" & "-") ?
let checkIfNum;
if (e.key !== undefined) {
// Check if it's a "e", ".", "+" or "-"
checkIfNum = e.key === "e" || e.key === "." || e.key === "+" || e.key === "-" ;
}
else if (e.keyCode !== undefined) {
// Check if it's a "e" (69), "." (190), "+" (187) or "-" (189)
checkIfNum = e.keyCode === 69 || e.keyCode === 190 || e.keyCode === 187 || e.keyCode === 189;
}
return checkIfNum && e.preventDefault();
}
render(){
return (
<input
name="numInput"
value={ this.state.value }
onChange={ this.handleChange }
onKeyDown={ this.formatInput } // this is where the magic happen ?
/>
}
}
export default MyComponent;
回答by Sushant Verma
try this
试试这个
<input type="text" pattern="\d+" />
Check here :http://jsfiddle.net/b8NrE/1/
在这里检查：http: //jsfiddle.net/b8NrE/1/
