CODEWITHSUNDEEP
javascriptreactjs
Abhishek
Abhishek

Reputation: 301

How I can disable copy paste in an input box in react js

I have input box, I don't want user to copy paste into the input box '-'(minus) , '.'(decimal) value

Upvotes: 0

Views: 3966

Answers (2)

buzatto
buzatto

Reputation: 10382

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>
  );
}

Upvotes: 1

Rahul Sharma
Rahul Sharma

Reputation: 10071

You can use onCopy, onPaste, onCut event 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}
/>

Upvotes: 1

Related Questions