首页  >  文章  >  web前端  >  如何在 JavaScript 中检测和阻止 Ctrl V 和 Ctrl C 组合键?

如何在 JavaScript 中检测和阻止 Ctrl V 和 Ctrl C 组合键?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-27 11:49:02941浏览

How to Detect and Block Ctrl V and Ctrl C Key Combinations in JavaScript?

在 JavaScript 中检测 Ctrl V 和 Ctrl C

为了防止用户将内容粘贴到文本区域,可以利用 JavaScript 进行检测和阻止某些键盘组合。

一种常见的方法是使用 keydown 和 keyup 事件来监视 Ctrl 键(对于 Mac 为 ctrlKey 或 cmdKey)的按下和释放。当检测到 Ctrl 时,随后按下的 V(粘贴)或 C(复制)键将被拦截。

以下是示例代码片段:

<code class="javascript">$(document).ready(function() {
    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86,
        cKey = 67;

    $(document).keydown(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
    });

    $(".no-copy-paste").keydown(function(e) {
        if (ctrlDown &amp;&amp; (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown &amp;&amp; (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown &amp;&amp; (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});</code>

在此代码中,带有“no-copy-paste”类禁用了 Ctrl V 和 Ctrl C。该代码还会记录在文档中任意位置按下时的这些组合键。

实现

要在文本区域中实现此功能,可以使用 HTML 和 CSS:

<code class="html"><h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea></code>
<code class="css">.no-copy-paste {
    -webkit-user-select: none;  /* Chrome/Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* Standard syntax */
}</code>

这种方法有效地防止文本被复制并粘贴到受保护的文本区域。

以上是如何在 JavaScript 中检测和阻止 Ctrl V 和 Ctrl C 组合键?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn