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

【问题标题】：Disable pasting text into HTML form禁用将文本粘贴到 HTML 表单中
【发布时间】：2010-11-16 15:05:35
【问题描述】：

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

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

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

也许您可以建议另一种解决方案来解决我在这里要解决的核心问题，而不是使用这个“hack”？我做了不到六次用户测试，这已经发生了两次。我的听众对计算机的熟练程度不高。

【问题讨论】：

阻止人们将电子邮件地址从地址簿复制/粘贴到浏览器。这会很顺利。
当客户坚持要更改时，我无能为力。享受你的饮料:)
如果他仅在电子邮件未粘贴到原始字段时才禁用在验证字段中的粘贴可能会非常好。换句话说，用户要么必须将电子邮件粘贴到两个字段中，要么都粘贴到两个字段中。
如果客户要求这样做，请告诉他们这是多么糟糕的想法。这是在客户最有可能离开时（在注册时）激怒客户的好方法。您不希望客户关系从被疏远的客户开始。随着越来越多的人使用密码管理器，这种做法变得越来越普遍，也越来越令人反感。另见：ux.stackexchange.com/q/21062/9529 和 ob。 xkcd：xkcd.com/970
我在寻找如何用元素检查器击败这个“功能”时发现了这个问题。成功了！

标签： javascript html copy-paste

【解决方案1】：

你可以……但不要。

您不应更改用户浏览器的默认行为。这确实对您的 Web 应用程序的可用性很差。此外，如果用户想要禁用此 hack，那么他们只需在浏览器上禁用 javascript。

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

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

【讨论】：

问题是关于禁用粘贴。这种技术只会使复制变得困难，根本不会影响粘贴。

【解决方案2】：

您可以将“keydown”侦听器附加到输入框，以检测是否按下了 Ctrl + V 键，如果是，则停止事件或将输入框的值设置为 ''。

不过，这无法处理右键单击和粘贴或从浏览器的“编辑”菜单粘贴。您可能需要向 keydown 侦听器添加一个“最后长度”计数器，并使用间隔来检查字段的当前长度，以查看它自上次击键后是否增加。

不过，两者都不推荐。禁用粘贴的表单字段非常令人沮丧。我第一次可以正确输入我的电子邮件，因此我保留将其粘贴到第二个框中的权利。

【讨论】：

不能右键单击，甚至不能从 Apple、Unix 或 ctrl-ins 中获得任何东西，而 iPhone 呢？
我也不喜欢禁用输入字段，因为我觉得这让我自己很沮丧。但是还有哪些其他选项可以阻止此类用户错误呢？或者哪种解决方案最终会导致错误完成的用户注册最少？必须再次手动输入电子邮件地址似乎有点烦人，但如果它要拯救沮丧的潜在客户，那么我宁愿强迫用户手动在输入字段中输入一些内容。我认为这不是一个很大的不便，它可以使某人免于一个简单的错误所带来的挫败感可能是值得的。想法？

【解决方案3】：

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

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

不是一个完美的解决方案，只是一些想法。

【讨论】：

我目前有这个实现。问题是用户认为他们没有收到电子邮件是因为我们的错误，因为他们检查了他们认为他们输入的电子邮件地址并且他们没有电子邮件。同样发生的情况是，当他们再次尝试重新注册时，他们使用的用户名现在不可用，因为它被错误的电子邮件地址卡住了。
Tnen 可能会添加一些工作流程/代码，每天运行清理两天未确认的用户名。
感谢您的评论。我的想法是，如果您尝试在网站上创建一个帐户，并且它说您的用户名已被盗用，您会在 2 天内再次返回并再次尝试吗？我的想法很可能不是。要么您在同一天使用不同的用户名创建了一个新帐户，要么您因为不知道如何注册并且该网站“太复杂”而没有费心回到该网站。
继续 Colin 所说的，您可以假设当有人尝试使用相同的用户名和不同的电子邮件地址重新注册并且他们没有回复确认消息时，这可能没问题让他们这样做。您可能会发现人们在他们的电子邮件中正确填写了他们的域名但拼错了他们的用户名，并且可以使用它来进一步确定某人何时犯了错误？
我非常喜欢允许尚未确认其帐户信息的用户重新注册的想法。我认为这个设计方案比我最初提出的技术方案要好。听到其他人说更改此默认浏览器功能是个坏主意，我需要听到这些信息才能找到更好的解决方案。

【解决方案4】：

为您的注册流程添加第二步。像往常一样的第一页，但在重新加载时，显示第二页并再次询问电子邮件。如果它很重要，用户可以处理它。

【讨论】：

【解决方案5】：

我最近不得不不情愿地禁用在表单元素中粘贴。为此，我编写了 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 或粘贴。在所有这些浏览器中，只有 Opera 不支持 onpaste，但它支持 oninput。

注意：这不适用于使用屏幕键盘的控制台或其他系统（假设屏幕键盘在选择每个键时不会向浏览器发送键）。如果您的页面/应用程序可能被具有屏幕键盘和 Opera 的人使用（例如：Nintendo Wii、某些手机），请不要使用此脚本，除非您已经测试以确保屏幕键盘每次选择键后将键发送到浏览器。

【讨论】：

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

【解决方案6】：

疯狂的想法：要求用户在注册过程中向您发送电子邮件。当单击 mailto 链接不起作用时（例如，如果他们使用网络邮件），这显然会带来不便，但我认为这是一种同时保证不会出现拼写错误并确认电子邮件地址的方法。

它会是这样的：他们填写了大部分表格，输入了他们的姓名、密码等等。当他们推送提交时，他们实际上是在单击一个链接以将邮件发送到您的服务器。您已经保存了他们的其他信息，因此该消息仅包含一个标记，说明这是针对哪个帐户的。

【讨论】：

【解决方案7】：

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

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

更好的是，如果可以的话，让用户在不确认的情况下拥有某种有限的访问权限。这样，即使确认邮件由于其他原因（例如垃圾邮件过滤器）而被阻止，他们也可以立即登录，从而提高与访问者保持联系的机会。

【讨论】：

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

【解决方案8】：

在 UIWebView 上使用 CSS 怎么样？像

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

您还可以阅读有关使用 CSS 进行块复制粘贴的详细信息 http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

【讨论】：

【解决方案9】：

简单的解决方案：只需颠倒注册过程：在注册过程结束时请求确认，而不是在注册过程开始时请求确认！ IE。注册过程从一个简单的表格开始，要求提供电子邮件地址，仅此而已。提交后，将发送一封电子邮件，其中包含指向该电子邮件地址唯一的确认页面的链接。用户转到该页面，然后将请求注册的其余信息（用户名、全名等）。

这很简单，因为网站在确认之前甚至不需要存储任何内容，电子邮件地址可以使用密钥加密并作为确认页面地址的一部分附加。

【讨论】：

【解决方案10】：

我为http://bookmarkchamp.com 做了类似的事情 - 我想检测用户何时将某些内容复制到 HTML 字段中。我想出的实现是不断检查该字段，看看是否在任何时候那里突然出现一大堆文本。

换句话说：如果一毫秒前没有文本，现在有超过 5 个字符......那么用户可能在字段中粘贴了一些内容。

如果您想在 Bookmarkchamp 中看到此功能（您需要注册），请将 URL 粘贴到 URL 字段中（或将 URL 拖放到其中）。

【讨论】：

【解决方案11】：

from

有些人可能会建议使用 Javascript 来捕获用户的操作，例如右键单击鼠标或 Ctrl+C / Ctrl+V 组合键然后停止操作。但这显然不是最好或最简单的解决方案。该解决方案与使用 Javascript 的一些事件捕获一起集成在输入字段属性本身中。

要禁用浏览器的自动完成功能，只需将属性添加到输入字段即可。它应该看起来像这样：

<input type="text" autocomplete="off">

如果您想拒绝该字段的复制和粘贴，只需添加 Javascript 事件捕获调用 oncopy、onpaste 和 oncut 并让它们返回 false，如下所示：

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

下一步是使用 onselectstart 拒绝用户选择输入字段的内容，但请注意：这仅适用于 Internet Explorer。以上其余部分在所有主流浏览器上都运行良好：Internet Explorer、Mozilla Firefox、Apple Safari（至少在 Windows 操作系统上）和 Google Chrome。

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。
是啊，下次我会注意的
为什么不从现在开始描述什么是“解释得很好”，这就是你获得支持和更好的代表的方式:)
有什么理由可以（试图）关闭自动完成功能？ “我们讨厌我们的用户！” ?如果你想成为用户的敌人，他们会恨你，但他们最终还是会赢，因为他们控制着浏览器。

【解决方案12】：

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

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

【讨论】：

对我来说很好，坦克！

【解决方案13】：

检查给定电子邮件主机的 MX 记录的有效性。这可以消除 @ 符号右侧的错误。

您可以在提交之前使用 AJAX 调用和/或在提交表单之后使用服务器端来执行此操作。

【讨论】：

【解决方案14】：

Hope below code will work :

<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

【讨论】：

【解决方案15】：

我将解决确认电子邮件地址问题的方法如下：

在完成主要流程之前 - 比如注册用户 - 首先要求他们输入他们的电子邮件地址。
生成唯一代码并将其发送到该电子邮件地址。
如果用户输入了正确的电子邮件地址，他们将获得验证码。
用户必须输入该代码以及他们的电子邮件地址和其他必需的信息，这样他们才能完成注册。 - 请注意，如果这次他们输入了错误的电子邮件地址（或错误的代码），因为它与代码不匹配，注册将无法通过，并且会立即通知用户。
如果邮箱、验证码等注册信息输入正确，则注册完成，用户可以立即开始使用系统。 - 无需回复任何其他电子邮件地址即可激活他们的帐户

为了更好的安全性，代码应该有一个有限的生命周期，并且应该在注册过程中只允许一次。另外，为了防止任何恶意机器人应用程序，最好在第一步附带验证码或类似机制。

【讨论】：

【解决方案16】：

扩展@boycs答案，我建议也使用“on”。

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

【讨论】：

如果您打算将脚本应用于动态添加的表单元素，此方法很有用。

【解决方案17】：

刚刚得到这个，我们可以使用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>

【讨论】：

【解决方案18】：

使用jquery，可以避免复制粘贴和剪切

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

【讨论】：

【解决方案19】：

你可以使用jquery

HTML 文件

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

jquery 代码

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

【讨论】：

【解决方案20】：

如果您必须使用 2 个电子邮件字段并且担心用户错误地将相同的错误输入的电子邮件从字段 1 粘贴到字段 2，那么如果用户将某些内容粘贴到第二个电子邮件字段

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

这样你不会禁用粘贴，你只是给他们一个友好的提醒，检查他们大概在第一个字段中输入的内容，然后粘贴到第二个字段是否正确。

但是，也许只需要一个启用自动完成功能的电子邮件字段。很可能他们之前在另一个网站上已经正确填写了他们的电子邮件，浏览器会建议用该电子邮件填写该字段

<input type="email" name="email" required autocomplete="email">

【讨论】：

【解决方案21】：

我使用这个香草 JS 解决方案：

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())

【讨论】：

【解决方案22】：

使用 Jquery，您可以使用一个简单的代码行来做到这一点。

HTML：

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

代码：

$(email).on('paste', false);

JSfiddle：https://jsfiddle.net/ZjR9P/2/

【讨论】：

【解决方案23】：

您可以通过以下脚本使用 jQuery 禁用复制粘贴选项：

jQuery("input").attr("onpaste","return false;");

在输入字段中使用 oppaste 属性。

onpaste="return false;"

【讨论】：

【解决方案24】：

函数式方法与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>

【讨论】：

【解决方案25】：

如果你使用的是角度

<input type="number" (keydown)="refuseInvalid($event) (input)="refuseInvalid($event)" (paste)="refuseInvalid($event)">           </input>

然后在您的 javascript 或打字稿中

refuseInvalid(event) {
    if (event.type == 'input' || event.type == 'paste') {
      event.preventDefault()
      return false;
    }
    if (["-", "+", "e", "."].includes(event.key)) {
      event.preventDefault();
      return false
    }
  }

请注意"." 的使用。它也将不允许小数点数字。

【讨论】：