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

IT技术 javascript html copy-paste
2021-01-21 21:13:10

有没有办法使用 JavaScript 禁用将文本粘贴到 HTML 表单上的文本字段的功能?

例如,我有一个简单的注册表单,用户需要在其中输入两次电子邮件。第二个电子邮件条目是为了验证第一个电子邮件条目中没有拼写错误。但是,如果用户复制/粘贴他们的电子邮件,那就违背了目的,我一直遇到用户遇到问题,因为他们输入了错误的电子邮件并复制/粘贴了它。

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

也许不是使用这个“hack”,你可以建议另一个解决方案来解决我在这里试图解决的核心问题?我已经完成了不到六次用户测试,这已经发生了两次。我的听众没有很高的计算机水平。

6个回答

不要这样做。不要弄乱用户的浏览器。通过复制 + 粘贴到电子邮件确认字段中,用户对其键入的内容承担责任。如果他们愚蠢到可以复制+粘贴错误的地址(这发生在我身上),那就是他们自己该死的错。

如果您想确保电子邮件确认成功,请让用户在您的站点等待时检查他们的电子邮件(“请在新窗口中打开您的网络邮件程序”)。以大写字母显示电子邮件地址(“确认电子邮件已发送至.... 出错?单击此处更改)。

更好的是,如果可以的话,让用户无需确认即可获得某种有限的访问权限。这样,他们可以立即登录,即使确认邮件由于其他原因(例如垃圾邮件过滤器)被阻止,您也可以增加与访问者保持联系的机会。

但几乎任何事情都有正当理由,不回答某人的问题,因为你认为他们的理由不合理是令人恼火的。假设你有一个测验,你试图用复杂的答案来实现。禁用粘贴并强迫学生输入整个答案而不是复制粘贴会使他们将答案提交到记忆中,而仅复制粘贴可能毫无value。这样做是有正当理由的。警告某人在大多数情况下他们试图做的事情不是一个好主意,但请给出答案……或者最好不要费心回复。
2021-03-19 21:13:10
我同意您对用户自己输入数据的情况的回答。但是,当用户代表其他人输入电子邮件地址时 - 例如,CRM 系统或类似系统 - 实施您的解决方案是不可行的。在这些情况下,用户输入的不是他们自己的电子邮件地址,因此他们很可能会拼错。如果您允许粘贴到电子邮件确认框,那么您将收到大量不正确的数据,因此阻止粘贴没有任何问题。作为开发人员,您必须避免“足够愚蠢”的用户来保护业务数据。
2021-03-23 21:13:10
说不做并不能回答问题。我目前需要禁用粘贴。
2021-03-31 21:13:10
如果您曾经收到过这样的要求,作为专业人士,您应该反击它。你不仅仅是一双会写代码的手。
2021-03-31 21:13:10
还有一种常见的情况是,查看此问题的开发人员几乎无法控制他们正在处理的项目的需求。这不是这里提出的问题的答案,所以 -1。
2021-04-03 21:13:10

将“disablecopypaste”类添加到要禁用复制粘贴功能的输入中,并添加此 jQuery 脚本

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });
对我来说很好用,坦克!
2021-03-18 21:13:10

我最近不得不不情愿地禁用在表单元素中粘贴。为此,我编写了 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、某些手机),请不要使用此脚本,除非您已测试以确保屏幕键盘每次选择键后将键发送到浏览器。

@McAuley 那又怎样?防止粘贴要糟糕得多,尤其是对于像 textarea 这样可能很长的东西。如果我需要粘贴而无法粘贴,我可能根本不会填写该表格。如果我绝对必须这样做,内容将是简洁和不完整的,并且可能是粗鲁的。您不想处理支持电话,因为格式未保留?我怀疑这种情况经常发生,这掩盖了你的懒惰。搞砸一堆用户以避免一些工作。好的。
2021-03-12 21:13:10
关于实现,我看到了两个明显的改进:1) 仅在不支持 onpaste 的浏览器中运行代码,2) 在修改 DOM 时重新执行 - 目前它不会应用于动态添加的输入。
2021-03-19 21:13:10
即使我不包括您编写的 js,我也可以通过仅包括来阻止用户粘贴任何内容,onpaste="return false"如果我采用这种方法会不会有任何问题
2021-03-27 21:13:10
@viveksinghggits 代码onpaste在尚未提供的浏览器中实现。您说“我可以阻止用户粘贴任何内容”,但是您在哪些浏览器中对此进行了测试?
2021-04-03 21:13:10
为了防止火狐遵守这个愚蠢的规则,去 about:config 并将 dom.event.clipboardevents.enabled 更改为 false
2021-04-04 21:13:10

刚刚得到这个,我们可以使用它来实现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>

你可以……但不要。

您不应更改用户浏览器的默认行为。对于您的 Web 应用程序来说,这确实是糟糕的可用性。此外,如果用户想要禁用此 hack,那么他们可以在浏览器上禁用 javascript。

只需将这些属性添加到文本框

ondragstart=”return false” onselectstart=”return false”
问题是关于禁用粘贴。这种技术只会使复制变得困难,而根本不会影响粘贴。
2021-03-22 21:13:10