如何使用 JavaScript 检测 Ctrl+V、Ctrl+C?

IT技术 javascript jquery html
2021-01-11 18:29:21

如何检测ctrl+ v, ctrl+c使用 Javascript?

我需要限制在我的 textarea 中粘贴,最终用户不应复制和粘贴内容,用户只能在 textarea 中键入文本。

如何实现这一目标?

6个回答

我只是出于兴趣这样做。我同意这不是正确的做法,但我认为这应该是操作员的决定......此外,代码可以轻松扩展以添加功能,而不是将其删除(例如更高级的剪贴板,或Ctrl+s触发服务器-边保存)。

$(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 && (e.keyCode == vKey || e.keyCode == cKey)) return false;
    });
    
    // Document Ctrl + C/V 
    $(document).keydown(function(e) {
        if (ctrlDown && (e.keyCode == cKey)) console.log("Document catch Ctrl+C");
        if (ctrlDown && (e.keyCode == vKey)) console.log("Document catch Ctrl+V");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Ctrl+c Ctrl+v disabled</h3>
<textarea class="no-copy-paste"></textarea>
<br><br>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea>

也只是为了澄清,这个脚本需要 jQuery 库。

代码笔演示

编辑:由于 Tim Down 的建议,删除了 3 条冗余行(涉及 e.which)(见评论)

编辑:添加了对 Mac 的支持(cmd键而不是ctrl

我不是专家或任何东西,但我认为测试e.metaKeye.ctrlKey存在true而不是为键分配数字值并测试它们可能会更好
2021-03-14 18:29:21
@Tim:文档上的 Ctrl 键处理程序是通用的 - 因为他们可能不希望 ctrlDown 变量专门链接到无复制粘贴输入。这可能是OTT。感谢 e.which 提示 - 我已经花了半个小时研究 e.keyCode 和 e.which 的不同用例以及 keydown() 和 keypress(),真是一团糟(尤其是在 Firefox 中)!
2021-03-16 18:29:21
伙计!谢谢!这正是我需要使用户能够在我正在编写的网络应用程序中选择一个“元素”(日历条目),按 ctrl + c 来“复制”它,然后按 ctrl+v 来“粘贴”它,所有都没有实际上与万能的祝福剪贴板交互。ctrl+c 我记得他们点击了什么,ctrl+v 我复制它,每个人都赢了。
2021-03-22 18:29:21
jackocnr:我推荐 Jan Wolter 的 JavaScript 密钥处理文章:unixpapa.com/js/key.html我已经多次使用它作为参考,没有发现错误。
2021-03-29 18:29:21
为什么在keydownkeyup处理程序上document您可以在$(".no-copy-paste").keydown处理程序中测试 Ctrl 键此外,不需要e.keyCode || e.whichbit:e.keyCode适用于所有可用的浏览器e.which,因此e.which永远不会被使用。也许您正在考虑如何从keypress事件中获取字符代码最后,这对上下文或编辑菜单中的粘贴没有任何作用,但我想 OP 没有直接询问这一点。
2021-04-01 18:29:21

使用 jquery,您可以通过绑定函数轻松检测复制、粘贴等:

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});

更多信息在这里:http : //www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/

不幸的是,如果选择了文本,此方法只会在 Firefox 上触发
2021-03-13 18:29:21

虽然在用作反盗版措施时可能会很烦人,但我可以看到在某些情况下它可能是合法的,因此:

function disableCopyPaste(elm) {
    // Disable cut/copy/paste key events
    elm.onkeydown = interceptKeys

    // Disable right click events
    elm.oncontextmenu = function() {
        return false
    }
}

function interceptKeys(evt) {
    evt = evt||window.event // IE support
    var c = evt.keyCode
    var ctrlDown = evt.ctrlKey||evt.metaKey // Mac support

    // Check for Alt+Gr (http://en.wikipedia.org/wiki/AltGr_key)
    if (ctrlDown && evt.altKey) return true

    // Check for ctrl+c, v and x
    else if (ctrlDown && c==67) return false // c
    else if (ctrlDown && c==86) return false // v
    else if (ctrlDown && c==88) return false // x

    // Otherwise allow
    return true
}

我使用event.ctrlKey而不是像在 Mac OS X 上的大多数浏览器上那样检查键代码Ctrl/ Alt“向下”和“向上”事件永远不会被触发,因此检测的唯一方法是event.ctrlKeyCtrl之后在 eg c 事件中使用按住。我也ctrlKeymetaKeyfor macs代替

这种方法的局限性:

  • Opera 不允许禁用右键单击事件

  • 据我所知,无法阻止浏览器窗口之间的拖放。

  • 例如 Firefox 中edit->copy菜单项仍然可以允许复制/粘贴。

  • 也不能保证对于具有不同键盘布局/区域设置的人来说,复制/粘贴/剪切是相同的键代码(尽管布局通常只遵循与英语相同的标准),但一揽子“禁用所有控制键”意味着选择所有等也将被禁用,所以我认为这是需要做出的妥协。

有这样做的另一种方法: onpasteoncopyoncut事件可以注册并在IE,火狐,Chrome,Safari浏览器取消了(有一些小问题),唯一的主要的浏览器不允许取消这些活动是Opera。

正如您在我的其他答案中看到的那样,拦截Ctrl+vCtrl+c会带来许多副作用,但它仍然无法阻止用户使用 FirefoxEdit菜单等进行粘贴

function disable_cutcopypaste(e) {
    var fn = function(evt) {
        // IE-specific lines
        evt = evt||window.event
        evt.returnValue = false

        // Other browser support
        if (evt.preventDefault) 
            evt.preventDefault()
        return false
    }
    e.onbeforepaste = e.onbeforecopy = e.onbeforecut = fn
    e.onpaste = e.oncopy = e.oncut = fn
}

Safari 使用这种方法仍然存在一些小问题(在阻止默认设置时它会清除剪贴板而不是剪切/复制),但该错误现在似乎已在 Chrome 中得到修复。

另请参阅: http : //www.quirksmode.org/dom/events/cutcopypaste.html和相关的测试页面http://www.quirksmode.org/dom/events/tests/cutcopypaste.html了解更多信息。

现场演示:http : //jsfiddle.net/abdennour/ba54W/

$(document).ready(function() {

    $("#textA").bind({
        copy : function(){
            $('span').text('copy behaviour detected!');
        },
        paste : function(){
            $('span').text('paste behaviour detected!');
        },
        cut : function(){
            $('span').text('cut behaviour detected!');
        }
    });

});