[解決済み] HTMLフォームにテキストを貼り付けられないようにする

質問

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

例 簡単な登録フォームがあり、ユーザーは2回電子メールを入力する必要があります。2 回目の電子メール入力は、最初の電子メール入力にタイプミスがないことを確認するためのものです。しかし、ユーザーが自分の電子メールをコピー/ペーストすると、目的が達成されず、間違った電子メールを入力し、それをコピー/ペーストしたために問題が発生したことがあります。

私の質問が明確でなかったかもしれませんが、私は、ユーザーがブラウザ上でテキストをコピーする (またはドラッグで選択する) ことを防止しようとしているわけではありません。私はただ、ユーザーが 貼り付け の入力をテキスト フィールドに貼り付けるのを阻止して、ユーザー エラーを最小限に抑えたいだけです。

おそらく、この "hack" を使用する代わりに、私がここで解決しようとしていることの中核的な問題に対する別のソリューションを提案することができますか? 私は半ダース以下のユーザー テストを行いましたが、これはすでに 2 回起こりました。私の聴衆は、高いレベルのコンピューター能力を持っていません。

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

私は最近、フォーム要素での貼り付けを不本意ながら無効化しなければなりませんでした。これを行うために、私は 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 を使用している人 (例: Nintendo Wii、一部の携帯電話) があなたのページやアプリを使用する可能性がある場合、オンスクリーン キーボードが各キー選択の後にブラウザにキーを送信することを確認するテストを行っていない限り、このスクリプトを使用しないでください。