首頁 >web前端 >js教程 >如何在 JavaScript 中偵測和阻止 Ctrl V 和 Ctrl C 組合鍵?

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

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-27 11:49:021038瀏覽

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