禁用将文本粘贴到HTML表单中

Question

有没有一种方法可以使用JavaScript禁用将文本粘贴到HTML表单上的文本字段的功能？

例如，我有一个简单的注册表格，要求用户输入两次电子邮件。第二个电子邮件条目是为了验证第一个电子邮件条目中没有错别字。但是，如果用户复制/粘贴他们的电子邮件，那么这将无法达到目的，并且我一直在遇到用户的问题，因为他们输入了错误的电子邮件并复制/粘贴了它。

也许我不清楚我的问题，但我并不想阻止人们在其浏览器上复制（或拖动选择）文本。我只是想阻止他们 将 输入 粘贴
到文本字段中，以最大程度地减少用户错误。

也许您可以使用另一种解决方案来解决我要在此处解决的核心问题，而不是使用这种“
hack”？我已经完成了不到六个用户测试，而且已经发生了两次。我的听众没有很高的计算机水平。

Answer 1

我最近不得不勉强地禁用在表单元素中的粘贴。为此，我编写了Internet
Explorer（及其他）onpaste事件处理程序的跨浏览器*实现。我的解决方案必须独立于任何第三方JavaScript库。

这是我想出的。它并没有完全禁止粘贴（例如，用户一次可以粘贴一个字符），但是它满足了我的需要，避免了必须处理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，某些手机），请不要使用此脚本，除非您已经过测试以确保屏幕键盘每次选择键后，将键发送到浏览器。