如何在输入的按键上停止允许特殊字符

Question

I have below input

handleNameChange(event = {}) {
        console.log('event', event);
        this.setState({ reportCalculationName: event.target.value });
    }

onKeyPress(event) {
    let character = event.keyCode;
    console.log('character', character);
}


<div className="col-md-4">
   <label className="col-md-5">Calculation Name:</label>
    <input type="text" className="" id="calculation-name" title="Name" 
          onChange={this.handleNameChange} 
           value=this.state.reportCalculationName } onKeypress={this.onKeyPress}/>
  </div>

Keypress event is not even firing when I enter some special charcaters.I want to stop allowing `,."'|/+=] these characters in my input field in my react component

Answer 1

You can use event.preventDefault() to cancel the keypress event.

PseudoCode:

onKeyPress(event) {
    var key = window.event ? event.keyCode : event.which;
    if (key === [enter your value here]) {
        event.preventDefault(); <=== this will cancel the input
    } else {
       return true;
    }
    console.log('character', character);
    return false;
}

You can find more information here:

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault