Disable copy paste in an input box in React js

Question

I have an input box, I don't want users to copy paste the following into the input box:
- (minus) and . (decimal) value.

do you want user when pasting something like 123-4, input value will be 1234, or block the paste altogether? — Rafael Buzatto de Campos
– Rafael Buzatto de Campos, Commented Dec 24, 2020 at 6:10

Rafael Buzatto de Campos · Accepted Answer · 2020-12-24 06:28:39Z

1

below an implementation blocking paste with given conditions:

export default function App() {
  const [value, setValue] = useState('')

  const onPaste = (e) => {
    const paste = e.clipboardData.getData('text/plain')
    if (paste.match(/[-\.]/)) return
    setValue(paste)
  }

  return (
    <div>
      <input value={value} onPaste={onPaste} />
      {value}
    </div>
  );
}

answered Dec 24, 2020 at 6:28

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

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

Comments

0stone0 · Accepted Answer · 2025-08-12 14:11:12Z

1

You can use onCopy, onPaste and onCut events to disable action.

https://reactjs.org/docs/events.html#keyboard-events

const handleChange = (e) => {
    e.preventDefault();
};

<TextField
    value={val}
    onCut={handleChange}
    onCopy={handleChange}
    onPaste={handleChange}
/>

edited Aug 12 at 14:11

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

answered Dec 24, 2020 at 6:10

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Collectives™ on Stack Overflow

Disable copy paste in an input box in React js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related