React controlled input allows typing in letter?

Question

I am writing an app that contains a controlled input that has the type 'number'. I can still type letters in the input field, but the e.target.value just gets emptied. Does anyone know how I can disable the typing of letters? Namely, if a user types in a letter, the input field will simply not register but still keeps the numbers previously typed in.

Here is my code:

export class AddNewRecipe extends React.Component {
    constructor(props){
        super(props);
        this.state={prepField:{numeral:""}};

        this.handleInput = this.handleInput.bind(this)}

   handleInput(e){
      e.preventDefault();   
      if(e.target.className =='prepNumber')
      {   
          console.log(e.target.value)
          const newPrep = Object.assign({}, this.state.prepField)
          newPrep.numeral = currentValue
          this.setState({prepField: newPrep})
      }

render(){
return (<PrepTime 
        handlePrep={this.handleInput}
        prepField={this.state.prepField}
        />
)
}

and here is the child component

export default function(props){
    
    return(
        <div id = 'prepForm'>
            
                <input id = 'prepFormInput' type='number' className='prepNumber' value={props.prepField.numeral} onChange={props.handlePrep} placeholder='prep time' />
               
        </div>
    )
}

Does anyone know why that is? Because if I accidentally type '10v', the e.target.value which I will set to my state 'prepField.numeral' just becomes emptied.

Thank you!

You're going to need some sort of a REGEX solution.. [Please refer to this link](https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — Mateusz Szumilo, Apr 07 '22 at 18:56

score 1 · Answer 1 · answered Apr 07 '22 at 18:57

You can use this code:

<input id = 'prepFormInput' type='number' className='prepNumber' value={props.prepField.numeral} onChange={props.handlePrep} placeholder='prep time' onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'" />

This will avoids all characters that are not numbers!

This part make's input accept only numbers:

!isNaN(Number(event.key))

This part make's accept the arrow and delete keys:

['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code)

This part make's Firefox disallow spaces in numbers:

event.code!=='Space'

score 0 · Answer 2 · answered Jul 22 '22 at 14:52

(For react Applications)

If someone has text input and wants to accept only whole numbers. You can use the following code.

const numberInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const eventCode = event.code.toLowerCase();
    if (!(event.code !== null
    && (eventCode.includes("digit")
        || eventCode.includes("arrow")
        || eventCode.includes("home")
        || eventCode.includes("end")
        || eventCode.includes("backspace") 
        || (eventCode.includes("numpad") && eventCode.length === 7)))
    ) {
    event.preventDefault();
    }
};

I have compared the length of eventCode to 7 when it includes numpad because its actual value is like numpad0, numpad1 ... numpad9

This function can be specified in onKeyDown such as

<input
    id="myNumberInput"
    type="text"
    placeholder="numeric input"
    onKeyDown={numberInputKeyDown}
/>

To extent field to accept decimals or negative numbers you can console.log the eventCode in numberInputKeyDown to check your required key code and add it in if statement.

React controlled input allows typing in letter?

2 Answers2