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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (32)

有没有使用JavaScript来禁止将文本粘贴到HTML表单上的文本字段的方法?

例如,我有一个简单的注册表单,用户需要输入两次电子邮件。第二封电子邮件条目用于验证第一封电子邮件条目中是否有拼写错误。但是,如果用户复制/粘贴他们的电子邮件,那就会失去目的,而且我想到了用户遇到的问题,因为他们输入了错误的电子邮件并复制/粘贴了它。

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

可以提出另一种解决方案来解决我在这里要解决的核心问题?我已经完成了不到六次的用户测试,这已经发生了两次。我的用户没有很高的电脑熟练度。

提问于
用户回答回答于

我最近在表单元素中禁用粘贴。为此,我编写了Internet浏览器的浏览器实现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,但它支持输入。

注意:这不适用于使用屏幕键盘的控制台或其他系统(假设当选择每个键时,屏幕键盘不会将键发送到浏览器)。如果有可能页面/应用程序可能被具有屏幕键盘和Opera的人使用(例如:任天堂Wii,某些手机),请不要使用此脚本,除非已经测试确保屏幕键盘在每次键选择后将密钥发送到浏览器。

用户回答回答于

不要混淆用户的浏览器。通过复制+粘贴到电子邮件确认字段中,用户对他们输入的内容负责。

如果想确保电子邮件确认无效,请让用户在网站等待时检查其电子邮件(“请在新窗口中打开网络邮件程序”)。以大号字母显示电子邮件地址(“确认电子邮件发送给...发生了错误?请点击此处更改)。

更好的是,如果可以的话,让用户在没有确认的情况下进行一些有限的访问。这样,即使由于其他原因(如垃圾邮件过滤器)阻止了确认邮件,他们也可以立即登录,并提高与访问者保持联系的机会。

扫码关注云+社区

领取腾讯云代金券