Question

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

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

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

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

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支持输入或输入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应用程序的可用性确实很差。此外，如果用户想要禁用此黑客，那么他们可以在他们的浏览器上禁用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回答，我建议也使用＆＃34; on＆＃34;。

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

Answer 10

如果您必须使用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">

Answer 11

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

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

不推荐这两种方法。禁用粘贴的表单字段非常令人沮丧。我第一次能够正确输入电子邮件，所以我保留将其粘贴到第二个框中的权利。

Answer 12

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

Answer 13

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

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

Answer 14

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

HTML：

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

代码：

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

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

Answer 15

我使用这个vanilla JS解决方案：

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

Answer 16

from

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

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

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

如果你想拒绝该字段的复制和粘贴，只需添加捕获调用oncopy，onpaste和oncut的Javascript事件，并使它们返回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。

Answer 17

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

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

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

Answer 18

使用jquery，您可以避免使用此

复制粘贴和剪切

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

Answer 19

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

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

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

Answer 20

简单的解决方案：只需撤消注册过程：在注册过程结束时不需要确认，请在开始时请求确认！即注册过程以简单的形式开始，要求提供电子邮件地址而不是其他任何内容。提交后，会发送一封电子邮件，其中包含指向发送的电子邮件地址特有的确认页面的链接。用户转到该页面，然后将请求注册的其余信息（用户名，全名等）。

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

Answer 21

在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

Answer 22

您可以通过贝娄脚本禁用jQuery的复制粘贴选项。 jQuery（“ input”）。attr（“ onpaste”，“ return false;”）;

通过在输入字段中使用以下的 oppaste 属性

of

。

onpaste =“返回假；”

Answer 23

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

Answer 24

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>

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

24 个答案: