102

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

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

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

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

4

25 回答 25

152

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

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

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

于 2009-11-12T21:20:55.523 回答
76

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

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });
于 2012-01-10T01:17:20.203 回答
58

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

于 2009-11-12T17:12:07.740 回答
34

刚刚得到这个,我们可以使用它来实现它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>
于 2014-10-08T11:06:03.843 回答
17

你可以……但不要。

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

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

ondragstart=”return false” onselectstart=”return false”
于 2009-08-04T10:00:54.867 回答
10

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

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

于 2009-11-12T21:02:21.927 回答
7

如何向用户刚刚输入两次的电子邮件地址发送确认电子邮件,其中包含指向您网站上确认 URL 的链接,然后您知道他们收到了消息?

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

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

于 2009-08-04T10:20:41.333 回答
7

你可以使用jquery

HTML 文件

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

jQuery代码

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });
于 2015-11-05T13:28:58.097 回答
6

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

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });
于 2014-09-09T18:23:16.317 回答
3

如果您必须使用 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">
于 2016-08-24T08:24:50.827 回答
2

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

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

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

于 2009-08-04T10:04:50.740 回答
2

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

于 2009-08-04T13:21:59.623 回答
1

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

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

于 2010-11-27T20:14:25.273 回答
1

有些人可能会建议使用 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。

于 2011-09-01T13:14:28.960 回答
1

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

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

于 2012-03-06T22:28:33.087 回答
1

使用 jquery,您可以避免使用此复制粘贴和剪切

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});
于 2015-03-17T19:30:03.480 回答
1

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

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())
于 2016-10-31T14:11:14.080 回答
1

使用 Jquery,您可以使用一个简单的代码行来完成此操作。

HTML:

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

代码:

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

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

于 2018-08-09T21:05:30.960 回答
1

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

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

通过在输入字段中使用波纹管oppaste属性。

onpaste="return false;"
于 2020-02-20T09:28:37.920 回答
1

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

于 2021-03-30T13:21:49.443 回答
0

在 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的块复制粘贴的详细信息

于 2010-02-18T05:39:32.183 回答
0

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

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

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

于 2010-12-17T12:31:06.833 回答
0

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

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

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

于 2013-09-15T03:39:39.940 回答
0

如果您使用角度

<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
    }
  }

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

于 2021-10-22T10:22:04.607 回答
-1
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>
于 2013-01-30T10:22:47.613 回答