ReactJS - Cannot restrict user input to letters only

Question

I'm trying to restrict user input to letters only but for some reason it's not working. I'm very new to ReactJS so maybe my problem lies here somewhere. This is what I've got so far:

<input type="text" pattern="[a-zA-Z]*" placeholder="Add Skill" onChange={this.updateField} />

type="text" and pattern seem not to work in this case.

Thanks in advance!

Answer 1

The pattern attribute is used to check against the input value when it is submitting.

Ref: https://www.w3schools.com/tags/att_input_pattern.asp

---

To restrict users to input only letters, you can use the onKeyPress

<input
    type="text"
    onKeyPress={event => (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122)}
    placeholder="Add Skill"
    onChange={this.updateField}
/>

This is the ASCII table: http://www.asciitable.com/

---

UPDATE

Codepen: https://codepen.io/jeemok/pen/rqJaog