html react vue 输入框禁止复制、粘贴和剪切

主要用到原生事件oncopy、onpase 、oncut

1. html 使用 oncopy onpase oncut

   <!-- oncopy onpase oncut 返回fasle -->
   <input  onpaste="return false" oncopy="return false" oncut="return false"/>
   

2. vue 用@copy.native.capture.pervent='()=>{}' 、@pase.native.capture.pervent='()=>{}'、@cut.native.capture.pervent='()=>{}'

   <!-- 阻止事件perventDefault()  -->
   <input  @copy="(e)=>{ e.preventDefault()}" @paste="(e)=>{ e.preventDefault()}" @cut="(e)=>{ e.preventDefault()}"></input>
   
   <!-- 或者直接使用pervent;在pervent回调函数不做任何操作 -->
   <input  @copy.prevent="()=>{}" @paste.prevent="()=>{}" @cut.prevent="()=>{}"></input>
   
    <!--@copy在element-ui组件中失效。这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@copy则需要加上native关键词。 --> 
   <el-input  @copy.native.capture.prevent="()=>{}" @paste.native.capture.prevent="()=>{}" @cut.native.capture.prevent="()=>{}"></el-input>
   

3. react使用的是onCopy = {e => e.preventDefault()}、onPase = {e => e.preventDefault()}、onCut = {e => e.preventDefault()}

   <!-- 阻止事件  -->
   <input onCopy={(e) => e.preventDefault()} />
   <input onPaste={(e) => e.preventDefault()} />
   <input onCut={(e) => e.preventDefault()} />