1. ホーム
  2. javascript

[解決済み] JavaScriptでCtrl+V, Ctrl+Cを検出するには?

2022-04-13 18:17:50

質問

検出方法 ctrl + v , ctrl + c Javascriptを使用していますか?

テキストエリアでの貼り付けを制限したいのですが、エンドユーザーはコンテンツをコピー&ペーストできないようにし、ユーザーはテキストをテキストエリアに入力するだけでよくなります。

どうすれば実現できますか?

どのように解決するのですか?

興味本位でやってみただけです。正しいことではないとは思いますが、オペが決めるべきことだと思うので...。また、このコードは、機能を奪うのではなく、機能を追加するために簡単に拡張することができます(より高度なクリップボード、または 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 ライブラリが必要であることを明記しておきます。

コードペンのデモ

EDIT: Tim Down氏の提案により、冗長な3行を削除(e.whichを含む)(コメント参照)。

EDIT: Mac への対応を追加 ( cmd キーの代わりに ctrl )