如何使用JavaScript檢測複製貼上命令Ctrl+V、Ctrl+C?


本文將教你如何使用JavaScript檢測Ctrl+V按鍵。當用戶希望將內容貼上到輸入欄位時,他們有兩種選擇:使用右鍵選單或同時按下CTRL和V鍵。

keydown事件的ctrl屬性用於確定包含“Ctrl”的按鍵組合。它產生一個“布林”值,用於識別在觸發按鍵事件期間是否按下“ctrl”。

語法

event.ctrlKey

返回值

  • true − 按下“ctrl”鍵後。

  • false − 如果“ctrl”鍵未按下。

示例1

HTML原始碼 − 下面顯示了用於檢測“Ctrl+C”和“Ctrl+V”組合的“index.html”檔案程式碼。

<!DOCTYPE html>
<html>
<title>How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
</head>
<body style="text-align:center">
   <div class="container">
      <textarea placeholder="Enter Text Here" cols="40" row="4"></textarea>
      <textarea placeholder="Paste Text Here" cols="40" row="4"></textarea>
   </div>
   <div id="result1"></div>
   <div id="result2"></div>
</body>
</html>

CSS原始碼 − 下面顯示了上述HTML檔案中使用的“style.css”檔案程式碼。

.container{
   display: flex;
   flex-direction: column;
   align-items: center;
}
textarea{
   margin-top: 40px;
}

JavaScript程式碼 − 下面顯示了上述HTML檔案中使用的“script.js”檔案程式碼。

document.body.addEventListener("keydown", function (myEvent) {
   
   // function that verifies the detection
   myEvent = myEvent || window.event; // 'myEvent' is event object
   let key = myEvent.which || myEvent.keyCode; // this is to detect keyCode
   
   // Detecting Ctrl
   let ctrl = myEvent.ctrlKey ? myEvent.ctrlKey : ((key === 17) ? true : false);
   
   // if the key being pushed is V and ctrl is true.
   if (key == 86 && ctrl) {
   
      // print in result
      document.getElementById("result1").innerHTML =("Ctrl+V is pressed.");
   }
   else if (key == 67 && ctrl) {
   
      // if the key being pushed is C and the true value of ctrl
      // print in result
      document.getElementById("result2").innerHTML =("Ctrl+C is pressed.");
   }
}, false);

輸出

上述程式碼將給出以下輸出:

按下Ctrl+C後,您將看到打印出所需的訊息,如下所示。


接下來,按下Ctrl+V後,您將看到打印出所需的訊息,如下所示。


示例2

KeyboardEvent物件定義了使用者與鍵盤的互動;每個事件都指示使用者與鍵盤上的一個鍵或一個鍵與修飾鍵的組合之間的特定關係。事件型別(keydown、keypress或keyup)指示發生了什麼型別的鍵盤活動。

<!DOCTYPE html>
<html>
<title>How to detect copy paste commands Ctrl+V, Ctrl+C using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <h4>You will see a detected result with an alert box when you press the keyboard shortcut Ctrl+C.
   </h4>
   <h4>You will see a detected result with an alert box when you press the keyboard shortcut Ctrl+V.
   </h4>
   <script>
      document.addEventListener('keydown', evt => {
         if (evt.key === 'c' && evt.ctrlKey) {
            alert('You have been detected, you have pressed Ctrl+C');
         } else if (evt.key === 'v' && evt.ctrlKey) {
            alert('You have been detected, you have pressed Ctrl+V');
         }
      });
   </script>
</body>
</html>

在按下任何快捷鍵之前,您將看到此螢幕。

接下來,在按下鍵盤上的Ctrl+C快捷鍵後,您將看到此螢幕。

此外,在按下鍵盤上的Ctrl+V快捷鍵後,您將看到此螢幕。

簡而言之

每個程式設計師和系統管理員都知道Ctrl+C和Ctrl+V快捷鍵的價值,這是一個內置於每個作業系統環境核心的基本且通用的組合。

您可以透過使用JavaScript EventListener在命令內放置CSS層來隱藏有效載荷,從而在複製文字時修改複製的文字。上述程式碼或示例使用keydown事件,此事件恰好在按下Ctrl+C快捷鍵時觸發。執行此操作的execCommand("copy")命令需要一個觸發器,也稱為“事件”來執行。延遲0.8秒後,剪貼簿中的文字將被程式碼替換。

更新於:2022年12月9日

4K+ 瀏覽量

啟動您的職業生涯

完成課程後獲得認證

開始學習
廣告