如何在 React js 的输入框中禁用复制粘贴答案

【问题标题】：How I can disable copy paste in an input box in react js如何在 React js 的输入框中禁用复制粘贴
【发布时间】：2020-12-24 06:05:13
【问题描述】：

我有输入框，我不希望用户复制粘贴到输入框 '-'(minus) , '.'(decimal) value

【问题讨论】：

您是希望用户在粘贴123-4 之类的内容时，输入值为1234，还是完全阻止粘贴？
在粘贴包含减号或小数时阻止粘贴

标签： javascript reactjs

【解决方案1】：

您可以使用 onCopy、onPaste、onCut 事件来禁用操作。

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

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

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

【讨论】：

我可以在这方面寻求帮助吗？ stackoverflow.com/questions/65423577/…

【解决方案2】：

在具有给定条件的实现阻止粘贴下方：

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

【讨论】：