Restrict input value from paste with regex in React

Question

i have input field to place a phone number and i want to restrict every special character like

+,- .

from my input field with onPaste event. My code below is not working, i still can paste those special character to my input field

onPaste(e) {
  let str = e.target.value;
  let newstr = str.replace(/[+-.]/g, '');
  if (str !== newstr) {
  e.preventDefault();
 }}

my input code

<InputText
  name="officePhone"
  placeholder="Office Phone"
  label="Office Phone"
  type="number"
  onChange={e => this.onChange(e, 'form')}
  value={this.state.form.officePhone}
  onPaste={e => this.onPaste(e)}
/>

my code above is not working , i still able to paste those special character to my input field — Riantori
– Riantori, Commented May 11, 2017 at 18:30

Justin Ober · Accepted Answer · 2017-05-11 18:55:41Z

6

Your onPaste function is looking at the e.target.value, what it needs to be getting is the pasted data from the clipboard which you get by using e.clipboardData.getData('Text').

onPaste(e) {
  const str = e.clipboardData.getData('Text');
  const newStr = str.replace(/[+-.]/g, '');
  if (str !== newStr) {
    e.preventDefault()
  }
}

answered May 11, 2017 at 18:55

Justin Ober

8496 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sammy I. Over a year ago

Shouldn't the onPaste(e) function also change the component state? Since the value of <InputField /> is set to this.state.form.officePhone

Justin Ober Over a year ago

I am assuming he/she will come across this and add it to state later. I am unaware of how he/she is implementing the logic in the bigger picture.

Omkesh Sajjanwar Over a year ago

@JustinOber getting error "TypeError: Cannot read property 'detData' of undefined"

Collectives™ on Stack Overflow

Restrict input value from paste with regex in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related