如何在 JavaScript 中偵測和阻止 Ctrl V 和 Ctrl C 組合鍵？-js教程-PHP中文網

如何在 JavaScript 中偵測和阻止 Ctrl V 和 Ctrl C 組合鍵？

Mary-Kate Olsen

發布： 2024-10-27 11:49:02

原創

1056 人瀏覽過

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中文網其他相關文章！