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

Question

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

do you want user when pasting something like `123-4`, input value will be `1234`, or block the paste altogether? — buzatto, Dec 24 '20 at 06:10

score 1 · Answer 1 · answered Dec 24 '20 at 06:10

1

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}
/>

answered Dec 24 '20 at 06:10

Rahul Sharma

8,373
1
11
35

can i ask for some help on this? https://stackoverflow.com/questions/65423577/how-to-get-the-values-of-checkbox-instead-of-true – Kunal Vijan Dec 24 '20 at 06:13

score 1 · Answer 2 · answered Dec 24 '20 at 06:28

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

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

2 Answers2