JavaScript で Ctrl V キーと Ctrl C キーの組み合わせを検出してブロックするにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript で Ctrl V キーと Ctrl C キーの組み合わせを検出してブロックするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-27 11:49:02

オリジナル

1057 人が閲覧しました

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>

ログイン後にコピー

このコードでは、「コピー＆ペースト不可」クラスでは、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 中国語 Web サイトの他の関連記事を参照してください。