首頁 > web前端 > js教程 > 主體

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

Mary-Kate Olsen
發布: 2024-10-27 11:49:02
原創
940 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!