ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してテキストエリアでのコピーと貼り付けを無効にする方法

JavaScript を使用してテキストエリアでのコピーと貼り付けを無効にする方法

Patricia Arquette
リリース: 2024-11-02 22:11:02
オリジナル
886 人が閲覧しました

How to Disable Copying and Pasting in Textareas with JavaScript?

JavaScript を使用してコピー アンド ペーストを無効にする高度な方法

Web 開発では、エンドユーザーがテキストエリアにコンテンツをペーストできないようにすることが必要な場合があります。データの整合性またはユーザー エクスペリエンス。これを実現するには、カスタム JavaScript コードでソリューションを提供できます。

実装:

  1. キーダウン イベントを検出し、Ctrl またはCmd キーが押されました。
  2. keydown イベント ハンドラー内で、ユーザーが Ctrl または CmdV (貼り付け) または C (コピー)。
  3. 検出されたキーの組み合わせが
  4. Ctrl/Cmd V または Ctrl/Cmd C と一致する場合false を返すことで、貼り付けまたはコピー操作を防止します。

コード例:

<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" CSS クラスを適用します。このクラスのないテキストエリアでは、コピーと貼り付けは正常に機能します。

注: この解決策は、ユーザーが次のような標準のキーボード ショートカットを使用できなくなるため、すべてのアプリケーションに適しているわけではありません。検索/検索するには、Ctrl または Cmd F を使用します。この対策を実施する前に、使いやすさとセキュリティのトレードオフを比較検討することが重要です。

以上がJavaScript を使用してテキストエリアでのコピーと貼り付けを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート