web-dev-qa-db-ja.com

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

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

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

たぶん私は質問について明確ではなかったかもしれませんが、私は人々が彼らのブラウザでテキストをコピー（またはドラッグ選択）するのを防ごうとはしていません。ユーザーエラーを最小限に抑えるため、テキストフィールドへの貼り付け入力からそれらを停止するだけです。

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

javascripthtmlcopy-paste
88
justinl

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

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

// 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のみがonpasteをサポートしていませんが、oninputをサポートしています。

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

51
Christopher Parker

しないでください。ユーザーのブラウザを混乱させないでください。コピー+電子メールの確認フィールドへの貼り付けにより、ユーザーは入力内容に対する責任を受け入れます。彼らが不完全なアドレスをコピーして貼り付けるのが十分に愚かであるなら（それは私に起こりました）、それは彼ら自身のいまいましい障害です。

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

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

122
Pekka 웃

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

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

ちょうどこれを手に入れたので、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>
21
Kailas

できます.....できません。

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

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

ondragstart=”return false” onselectstart=”return false”
16
Sheff

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

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

9
Josh Lee

ユーザーがサイトに確認URLへのリンクがある2回入力した電子メールアドレスに確認メールを送信して、メッセージを受け取ったことを確認してください。

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

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

7
Richard Lucas

Jqueryを使用できます

HTMLファイル

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

jqueryコード

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

@ boycs answerを拡張すると、「on」も使用することをお勧めします。

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

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">
3
shunryu111

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

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

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

2
Kevin

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

2
Alsciende

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

HTML：

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

コード：

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

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

1
Julius

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

フォームを送信した後、送信側またはサーバー側、あるいはその両方でAJAX呼び出しを使用してこれを行うことができます。

1
max

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

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

from

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

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

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

そして、そのフィールドのコピーと貼り付けを拒否する場合は、oncopy、onpaste、oncutの呼び出しをキャプチャするJavascriptイベントを追加し、次のように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のすべての主要なブラウザーでうまく機能します。

1
vaichidrewar

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

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

0
S P Arif Sahari Wibowo

Jqueryを使用すると、これを使用してコピー貼り付けとカットを避けることができます

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

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

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

セキュリティを強化するには、コードの有効期間を制限し、登録プロセスで1回だけ許可する必要があります。また、悪意のあるロボットアプリケーションを防ぐために、最初のステップにcaptchaまたは同様のメカニズムを添付することをお勧めします。

0
Majix

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

つまり、1ミリ秒前にテキストがなく、現在5文字以上ある場合、ユーザーはおそらくフィールドに何かを貼り付けました。

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

0
Ivan Maeder

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

0
user275790