ReactJs 防止輸入類型數字中的 e 和點

Question

我想阻止e和. <input type="number"/> 。 沒有 jQuery 或使用step屬性。 我試過pattern="[0-9]"但它不起作用。

編輯：焦點鍵盤應該是數字鍵盤。

Answer 1

'e' 是數字字段中唯一接受的字母，因為它允許使用指數。 您可以使用input type="text"但它不會像type="number"那樣為您提供瀏覽器的本機上下箭頭。 並且pattern屬性在提交時驗證，但不會阻止某人首先輸入“e”。 在 REACT 中，您可以使用它來完全阻止輸入數字輸入中的“e”鍵：

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

Answer 2

這是我使用的最好的驗證。任何不是我們用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 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'));

這是小提琴。

Answer 4

這是一個非常強大的解決方案，可以防止不是數字的字符（“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;

Answer 5

處理此問題的最佳方法是在用戶使用鍵盤輸入字符時使用onKeyDown道具（純 html 中的 onkeydown）檢查 keyCode。 如果事件的 keyCode 是 69（對於 'e'）或 190（對於 '.'），那么您可以preventDefault() ，阻止顯示輸入。

<input
   type="number"
   onKeyDown={ e => ( e.keyCode === 69 || e.keyCode === 190 ) && e.preventDefault() }
/>

Answer 6

const PhoneInputHandler = (e) => {
        let phone=e.target.value;
        
        if(e.nativeEvent.data>=0 && e.nativeEvent.data<=9)
        {
            setStudentData({...StudentData,phone:phone})
            setValidationRules({...validationRules,phone: validatePhone(e.target.value)})
        }
        
    }

<div class="px-3 paddedInput mb-2" >
      <input class="mb-1 form-control smalltext" type="number"  name="phone" value={StudentData.phone}
                             onChange={(e)=> {PhoneInputHandler(e);}} placeholder="Enter Phone Number" /> 
      <span className="err">{validationRules.phone}</span>
</div>

Answer 7

如果您願意，這將有助於防止處理箭頭和 e，您可以添加其他可能的鍵[".","+","-"] 。

onKeyDown={(e) =>
  ["ArrowUp", "ArrowDown", "e", "E"].includes(e.key) && e.preventDefault()
}

Answer 8

您可以通過這種方式簡單地使用 onKeyDown：

  onKeyDown={event => {
    if (event.key == "." || event.key === "-") {
      event.preventDefault();
    }
  }}

Answer 9

嘗試這個

    <input type="text" pattern="\d+" />

在這里檢查：http: //jsfiddle.net/b8NrE/1/