如何在 JavaScript 中检测复制和粘贴

how to detect copy and paste in javascript?

本文关键字：复制 检测 JavaScript      更新时间：2023-09-26

我有两个字段，一个是emailid，另一个是在我的表单中password的。我想阻止用户粘贴到这些字段中。他们应该被迫手动输入，就像谷歌表单一样。

您也可以禁用ctrl+v组合和right click。

对于 IE，您可以利用以下事件处理程序：

onpaste="return false;" 
oncut="return false;" 
oncontextmenu="return false;" 
oncopy="return false;".

以下是适用于所有浏览器的解决方法：

function noCTRL(e) {
      var code = (document.all) ? event.keyCode : e.which;
      var ctrl = (document.all) ? event.ctrlKey : e.modifiers & Event.CONTROL_MASK;
      var msg = "Sorry, this functionality is disabled.";
      if (document.all) {
        if (ctrl && code == 86) {
          //CTRL+V
          alert(msg);
          window.event.returnValue = false;
        } else if (ctrl && code == 67) { 
         //CTRL+C (Copy)
          alert(msg);
          window.event.returnValue = false;
        }
      } else {
        if (ctrl == 2) {
          //CTRL key
          alert(msg);
          return false;
        }
      }
    }

在 HTML 部分中，您的字段将如下所示：

Email :<input name="email" type="text" value=""/><br/>
Password :<input name="password" type="password" value=""/><br/>
Confirm Email :<input name="email" type="text" value="" onkeydown="return noCTRL(event)"/>    
Confirm Password :<input name="password" type="password" value="" onkeydown="return noCTRL(event)"/>

我认为如果输入类型为password，用户无法复制密码字段

希望这有帮助。

注意：

  1. 在浏览器中禁用JavaScript将允许用户做任何他们想做的事情
  2. 始终牢记这一点：尊重用户的自由。

> 2020 年更新

您可以使用copy和paste事件来阻止这些操作，或者修改要复制或粘贴的数据。（请参阅浏览器支持的链接）

<input type="text" onpaste="return false">

或者更长的javascript版本：

const elem = document.getElementById('nopaste');
elem.addEventListener('paste', (event) => {
  event.preventDefault();
});
<input type="text" placeholder="can paste"><br>
<input type="text" id="nopaste" placeholder="can not paste">

你应该使用粘贴。当用户尝试粘贴文本时，将触发粘贴事件。

.HTML

<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">Try copying and pasting text into this field!</textarea>
<h3>Log:</h3>
<p id="log"></p>

JavaScript

function logCopy(event) {
  log.innerText = 'Copied!'n' + log.innerText;
}
function logPaste(event) {
  log.innerText = 'Pasted!'n' + log.innerText;
}
const editor = document.getElementById('editor');
const log = document.getElementById('log');
editor.oncopy = logCopy;
editor.onpaste = logPaste;

复制 

document.addEventListener("copy", (e) => {
   console.log("copy")
});

糊

document.addEventListener("paste", (e) => {
   console.log("paste")
});

> 2022 年更新：

对于在粘贴操作上接收 onChange 事件的输入元素，请提及 onpaste 选项，如下所示

<input onpaste='return true' onChange={handleChange}/>
相关文章：