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

Posted 2023-02-22

【中文标题】ReactJs 防止输入类型号中的 e 和 dot

【英文标题】：ReactJs prevent e and dot in an input type number

【发布时间】：2018-01-31 18:12:01

【问题描述】：

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

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

【问题讨论】：

How to block +,-,e in input type Number?的可能重复

这个网址可能对其他人有用：xspdf.com/resolution/51724882.html

【参考方案1】：

使用 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'));

Here is fiddle.

【讨论】：

这是在使用手机时显示数字键盘的焦点吗？

【参考方案2】：

试试这个

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

在这里查看：http://jsfiddle.net/b8NrE/1/

【讨论】：

如何使用<input type="text" /> 显示数字键盘？

试试这个<input id="inputbox" name="inputbox" type="number" pattern="\d+" />将类型文本更改为数字

【参考方案3】：

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

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

【参考方案4】：

处理这个问题的最好方法是在用户使用键盘输入字符时使用onKeyDown prop（纯html中的onkeydown）来检查keyCode。如果事件的keyCode是69（'e'）或190（'.'），那么你可以preventDefault()，防止输入被显示。

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

【参考方案5】：

这是一个非常强大的解决方案，可以防止非数字字符（“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;

【参考方案6】：

这是我使用的最佳验证。任何不是我们在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 演示。

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

const [symbolsArr] = useState(["e", "E", "+", "-", "."]);
  return (
    <div className="App">
      <input
        type="number"
        onKeyDown=e => symbolsArr.includes(e.key) && e.preventDefault()
      />
    </div>
  );

Codesandbox 演示。

【参考方案7】：

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>

【参考方案8】：

你可以这样简单地使用 onKeyDown：

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