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

Question

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

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

也许我不清楚我的问题,但我并不是想阻止人们在他们的浏览器上复制(或拖动选择)文本.我只是想阻止他们将输入粘贴到文本字段中以最小化用户错误.

也许不是使用这个"黑客",你可以建议另一个解决我正在努力解决的核心问题的解决方案？我做了不到六个用户测试,这已经发生了两次.我的观众没有高水平的计算机熟练程度.

Answer 1

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

如果您想确保电子邮件确认工作正常,请让用户在您的网站等待时检查他们的电子邮件("请在新窗口中打开您的网络邮件程序").用大胖子信件显示电子邮件地址("确认电子邮件发送给......发了错误？请点击此处更改).

更好的是,如果可以的话,让用户在没有确认的情况下获得某种有限的访问权限.这样,即使确认邮件因其他原因(例如垃圾邮件过滤器)被阻止,他们也可以立即登录并提高与访问者保持联系的机会.

Answer 2

向要禁用复制粘贴功能的输入添加一类'disablecopypaste'并添加此jQuery脚本

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

Answer 3

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

Answer 4

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

Answer 5

你可以.....但不要.

您不应该更改用户浏览器的默认行为.您的Web应用程序的可用性确实很差.此外,如果用户想要禁用此hack,那么他们可以在他们的浏览器上禁用javascript.

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

ondragstart=”return false” onselectstart=”return false”

Answer 6

疯狂的想法:要求用户在注册过程中向您发送电子邮件.当点击mailto链接不起作用时(例如,如果他们使用网络邮件),这显然是不方便的,但我认为这是一种同时保证打字错误并确认电子邮件地址的方法.

它会是这样的:他们填写大部分表格,输入他们的名字,密码等等.当他们推送提交时,他们实际上是在点击链接以向您的服务器发送邮件.您已经保存了其他信息,因此该消息只包含一个令牌,说明了这个帐号.

Answer 7

如何将确认电子邮件发送到用户刚刚输入两次的电子邮件地址,其中有一个链接指向您网站上的确认网址,那么您知道他们收到了消息吗？

任何未点击确认收到电子邮件的人可能都输入了错误的电子邮件地址.

不是一个完美的解决方案,而是一些想法.

Answer 8

你可以使用jquery

HTML文件

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

jquery代码

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

Answer 9

扩展@boycs答案,我建议也使用"on".

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

Answer 10

函数式方法VanillaJS

function pasteNotAllowFunc(xid){
 let myInput = document.getElementById(xid);
     myInput.onpaste = (e) => e.preventDefault();
}

function copyNotAllowFunc(xid){
 let myInput = document.getElementById(xid);
     myInput.oncopy = (e) => e.preventDefault();
}


copyNotAllowFunc('copyInput')

pasteNotAllowFunc('pasteInput')

Copy
<input id="copyInput" value="copy not allow" />
<hr/>
Paste
<input id="pasteInput" value="paste not allow"/>
<hr/>
Textarea
<textarea id="test" value="Paste here"></textarea>