HTMLフォームへのテキストの貼り付けを無効にする

JavaScriptを使用して、HTMLフォームのテキストフィールドにテキストを貼り付ける機能を無効にする方法はありますか？

たとえば、ユーザーがメールを2回入力する必要がある単純な登録フォームがあります。2番目の電子メールエントリは、最初の電子メールエントリにタイプミスがないことを確認するためのものです。ただし、ユーザーがメールをコピー/貼り付けすると目的が達成されず、ユーザーが間違ったメールを入力してコピー/貼り付けしたために問題が発生しています。

多分私は私の質問をはっきりしていませんでしたが、私は人々が彼らのブラウザでテキストをコピーする（または選択をドラッグする）ことを防ぐことを試みていません。ユーザーのエラーを最小限に抑えるために、入力をテキストフィールドに貼り付けないようにするだけです。

おそらく、この「ハック」を使用する代わりに、ここで解決しようとしている問題の中心的な問題に対する別の解決策を提案できますか？私は半ダース未満のユーザーテストを実行しましたが、これはすでに2回発生しています。私の聴衆は、高度なコンピュータ能力を持っていません。

私は最近、不本意ながらフォーム要素の貼り付けを無効にする必要がありました。そのために、私はInternet Explorer（およびその他）のonpasteイベントハンドラーのクロスブラウザー*実装を作成しました。私のソリューションは、サードパーティのJavaScriptライブラリから独立している必要がありました。

これが私が思いついたものです。貼り付けを完全に無効にするわけではありませんが（たとえば、ユーザーが一度に1文字を貼り付けることができます）、私のニーズを満たし、keyCodeなどを処理する必要がなくなります。

// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();

貼り付けを無効にするためにこれを利用するには：

<input type="text" onpaste="return false;" />

* oninputはW3C DOM仕様の一部ではありませんが、このコードでテストしたすべてのブラウザー（Chrome 2、Safari 4、Firefox 3、Opera 10、IE6、IE7）は、oninputまたはonpasteをサポートしています。これらすべてのブラウザーの中で、Operaのみがオンペーストをサポートしていませんが、オンインプットはサポートしています。

注：これは、画面キーボードを使用するコンソールまたはその他のシステムでは機能しません（画面キーボードは、各キーが選択されたときにブラウザーにキーを送信しないと想定しています）。画面キーボードとOpera（例：ニンテンドーWii、一部の携帯電話）を使用しているユーザーがページ/アプリを使用できる可能性がある場合は、画面キーボードを確認するためのテストを行っていない限り、このスクリプトを使用しないでください。キーを選択するたびにブラウザにキーを送信します。

しないでください。ユーザーのブラウザをいじらないでください。電子メールの確認フィールドにコピーして貼り付けることにより、ユーザーは入力内容に対する責任を負います。彼らが欠陥のある住所をコピーして貼り付けるのに十分なほどに馬鹿げている場合（それは私に起こりました）、それは彼ら自身のいまいましい欠陥です。

メールの確認が正しく機能することを確認する場合は、サイトの待機中にユーザーにメールを確認してもらいます（「新しいウィンドウでウェブメールプログラムを開いてください」）。メールアドレスを太字で表示します（「確認メールの送信先...エラーが発生しました。ここをクリックして変更してください）。

さらに可能であれば、ユーザーに確認せずに何らかの制限付きアクセスを許可してください。そうすれば、彼らはすぐにログインでき、他の理由（スパムフィルターなど）によって確認メールがブロックされた場合でも、訪問者と連絡を取り合う機会が増えます。

コピー貼り付け機能を無効にする入力に「disablecopypaste」のクラスを追加し、このjQueryスクリプトを追加します

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });

これを取得しただけでonpaste:"return false"、次のおかげでを使用してそれを達成できます：http : //sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

以下に示すように、他にもさまざまなオプションがあります。

<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>

できます.....しかし、しません。

ユーザーのブラウザのデフォルトの動作を変更しないでください。それはあなたのウェブアプリケーションにとって本当に使い勝手が悪いです。また、ユーザーがこのハックを無効にしたい場合は、ブラウザのJavaScriptを無効にすることができます。

これらの属性をテキストボックスに追加するだけです

ondragstart=”return false” onselectstart=”return false”

クレイジーなアイデア：サインアッププロセスの一環として、ユーザーにメールを送信するように要求します。これは、mailtoリンクをクリックしても機能しない場合（たとえば、ウェブメールを使用している場合）は明らかに不便ですが、タイプミスに対する保証とメールアドレスの確認を同時に行う方法と考えています。

それは次のようになります：彼らはほとんどのフォームに記入し、名前、パスワードなどを入力します。彼らがプッシュ送信するとき、彼らは実際にあなたのサーバーにメールを送るためにリンクをクリックしています。あなたはすでに他の情報を保存しているので、メッセージには、これがどのアカウント用であるかを示すトークンが含まれています。

ユーザーが2度入力したメールアドレスに確認メールを送信して、サイトに確認URLへのリンクがあり、そのメッセージを受け取ったことを知っているとしたらどうでしょう。

電子メールの受信を確認するためにクリックしない人は、電子メールアドレスを間違って入力した可能性があります。

完璧な解決策ではなく、いくつかのアイデアだけです。

あなたはjqueryを使うことができます

HTMLファイル

<input id="email" name="email">

jqueryコード

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });

@boycsの回答を拡張して、 "on"も使用することをお勧めします。

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });

2つの電子メールフィールドを使用する必要があり、ユーザーがフィールド1からフィールド2に同じタイプミスの電子メールを誤って貼り付けることを懸念している場合、ユーザーが2番目の電子メールフィールドに何かを貼り付けると、アラート（またはより微妙なもの）を表示します

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

この方法では、貼り付けを無効にせず、最初のフィールドに入力されたと思われるものを確認して、2番目のフィールドに貼り付けられていることを確認するための友好的なリマインダーを与えるだけです。

ただし、おそらくオートコンプリートがオンになっている単一のメールフィールドで十分です。おそらく、ある時点で別のサイトにアクセスする前にメールが正しく入力されている可能性があり、ブラウザはそのメールをフィールドに入力することを提案します

<input type="email" name="email" required autocomplete="email">

「キーダウン」リスナーを入力ボックスに接続して、Ctrl + Vキーが押されているかどうかを検出し、押されている場合は、イベントを停止するか、入力ボックスの値を ''に設定します。

ただし、右クリックして貼り付けたり、ブラウザの[編集]メニューから貼り付けることはできません。「最後の長さ」のカウンターをキーダウンリスナーに追加し、間隔を使用してフィールドの現在の長さをチェックして、最後のキーストローク以降に増加したかどうかを確認する必要がある場合があります。

ただし、どちらも推奨されません。貼り付けを無効にしたフォームフィールドは、非常にイライラします。初めてメールを正しく入力できるので、2番目のボックスに貼り付ける権利を留保します。

登録プロセスに2番目のステップを追加します。通常どおり最初のページですが、リロード時に2番目のページを表示して、もう一度メールを送信してください。それが重要であれば、ユーザーはそれを処理できます。

から

一部のユーザーは、Javascriptを使用して、マウスを右クリックするか、Ctrl + C / Ctrl + Vキーの組み合わせなどのユーザーのアクションをキャプチャしてから、操作を停止することを提案する場合があります。しかし、これは明らかに最良または最も単純なソリューションではありません。このソリューションは、JavaScriptを使用したいくつかのイベントキャプチャとともに、入力フィールドプロパティ自体に統合されています。

ブラウザのオートコンプリートを無効にするには、属性を入力フィールドに追加するだけです。次のようになります。

<input type="text" autocomplete="off">

そして、そのフィールドのコピーと貼り付けを拒否したい場合は、JavaScriptのイベントキャプチャ呼び出しoncopy、onpaste、oncutを追加して、次のようにfalseを返すようにします。

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

次のステップは、onselectstartを使用してユーザーからの入力フィールドのコンテンツ選択を拒否しますが、警告されます。これはInternet Explorerでのみ機能します。上記の残りの部分は、すべての主要なブラウザー（Internet Explorer、Mozilla Firefox、Apple Safari（少なくともWindows OS））、およびGoogle Chromeでうまく機能します。

指定された電子メールのホストのMXレコードの有効性を確認します。これにより、@記号の右側のエラーを排除できます。

これは、送信前のAJAX呼び出し、および/またはフォームが送信された後のサーバー側で行うことができます。

jqueryを使用すると、これを使用してコピーペーストとカットを回避できます

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

私はこのバニラJSソリューションを使用します：

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())

Jqueryを使用すると、1つの単純なコードラインでこれを行うことができます。

HTML：

<input id="email" name="email">

コード：

$(email).on('paste', false);

JSfiddle：https ://jsfiddle.net/ZjR9P/2/

UIWebViewでCSSを使用するのはどうですか？何かのようなもの

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

また、CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.htmlを使用して、ブロックのコピーと貼り付けに関する詳細を読むことができます 。

簡単な解決策：登録プロセスを逆にするだけです：登録プロセスの最後に確認を要求する代わりに、最初に確認を要求します！つまり、登録プロセスは、電子メールアドレスだけを求める単純なフォームから始まりました。送信すると、送信された電子メールアドレスに固有の確認ページへのリンクが記載された電子メール。ユーザーがそのページに移動すると、登録に関する残りの情報（ユーザー名、フルネームなど）が要求されます。

Webサイトは確認前に何も保存する必要がないため、これは簡単です。電子メールアドレスはキーで暗号化し、確認ページのアドレスの一部として添付できます。

私はhttp://bookmarkchamp.comに対してこれと同様のことを行いました-ユーザーが何かをHTMLフィールドにコピーしたことを検出したかったのです。私が思いついた実装は、常にフィールドをチェックして、いつでも突然大量のテキストがそこにあるかどうかを確認することでした。

言い換えると、ミリ秒前にテキストがなく、現在は5文字を超える場合...ユーザーはおそらくフィールドに何かを貼り付けました。

Bookmarkchampでこの動作を確認するには（登録が必要です）、URLをURLフィールドに貼り付けます（またはURLをそこにドラッグアンドドロップします）。

メールアドレスの確認の問題を解決する方法は次のとおりです。

1. メインプロセス（ユーザーの登録など）を実行する前に、まずユーザーにメールアドレスの入力を求めます。
2. 一意のコードを生成し、そのメールアドレスに送信します。
3. ユーザーが正しいメールアドレスを入力した場合、コードを取得します。
4. ユーザーは、登録を完了するために、電子メールアドレスとその他の必要な情報とともにそのコードを入力する必要があります。-今回、間違ったメールアドレス（または間違ったコード）を入力した場合、コードと一致しないため、登録が行われず、ユーザーにすぐに通知されます。
5. メールアドレス、コード、その他の登録情報が正しく入力されていれば、登録は完了していますので、すぐにご利用いただけます。-アカウントを有効にするために他のメールアドレスに返信する必要はありません

セキュリティを向上させるには、コードの有効期間を制限し、登録プロセスで1回だけ許可する必要があります。また、悪意のあるロボットアプリケーションを防ぐために、最初のステップにキャプチャまたは類似のメカニズムを追加することをお勧めします。

以下のスクリプトでjQueryのコピー貼り付けオプションを無効にできます。jQuery（ "input"）。attr（ "onpaste"、 "return false;"）;

以下のoppaste属性を入力フィールドに使用することによって。

onpaste = "return false;"

Hope below code will work :

<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>