禁用粘贴文本到HTML表单

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

例如,我有一个简单的registry单,用户需要input两次邮件。 第二封电子邮件条目是为了validation第一封电子邮件条目中是否有拼写错误。 但是,如果用户复制/粘贴他们的电子邮件,那么这就违背了目的,并且由于他们input了错误的电子邮件并复制/粘贴,所以我遇到了用户有问题的情况。

也许我不清楚我的问题,但我不是想阻止人们在他们的浏览器上复制(或拖动select)文本。 我只是想阻止他们粘贴input到文本字段,以最大限度地减less用户错误。

也许不是使用这个“黑客”,你可以提出另一个解决scheme来解决我在这里要解决的核心问题? 我已经做了不到六次的用户testing,而且已经发生了两次。 我的听众没有很高的电脑熟练程度。

我最近不得不吝啬地禁止粘贴表单元素。 为此,我编写了Internet浏览器(和其他人)的浏览器*实现onPaste事件处理程序。 我的解决scheme必须独立于任何第三方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规范的一部分,但是我已经testing了这个代码的所有浏览器,包括Chrome 2,Safari 4,Firefox 3,Opera 10,IE6,IE7,支持oninput或onpaste。 在所有这些浏览器中,只有Opera不支持onpaste,但它支持input。

注意:这不适用于使用屏幕键盘的控制台或其他系统(假设在select每个键时,屏幕键盘不会将键发送到浏览器)。 如果您的页面/应用程序可能被具有屏幕键盘和Opera的人使用(例如:任天堂Wii,某些手机),请不要使用此脚本,除非您已经testing确保屏幕键盘在每次按键select之后将密钥发送到浏览器。

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

如果您想确认电子邮件确认是否正常,请让用户在您的网站等待的时候检查他们的电子邮件(“请在新窗口中打开您的networking邮件程序”)。 用大写字母显示电子邮件地址(“确认电子邮件发送给…发生了错误?点击此处更改)。

更好的是,如果可以的话,让用户在没有确认的情况下进行一些有限的访问。 这样,即使由于其他原因(如垃圾邮件filter)阻止了确认邮件,他们也可以立即login,并提高与访问者保持联系的机会。

添加一个'disablecopypaste'到你想禁用复制粘贴function的input,并添加这个jQuery脚本

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

你可以…..但不要。

您不应该改变用户浏览器的默认行为。 这对您的Web应用程序来说真的很糟糕。 另外,如果用户想要禁用这个黑客,那么他们可以禁用他们的浏览器的JavaScript。

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

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

刚刚得到这个,使用onpaste:"return false" ,感谢: http : onpaste:"return false"

我们有其他各种选项,如下所列。

 <input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br> 

如何将确认电子邮件发送到用户刚刚input了两次的电子邮件地址,其中有一个到您网站上的确认URL的链接,那么您知道他们已经收到了该消息?

任何不点击确认收到电子邮件的人都可能错误地input了他们的电子邮件地址。

不是一个完美的解决scheme,但只是一些想法。

疯狂的想法:要求用户发送电子邮件作为注册过程的一部分。 这显然是不方便的,当点击一个邮件链接不起作用(例如,如果他们使用networking邮件),但我认为这是一种同时保证打字错误和确认电子邮件地址的方式。

它会这样:他们填写大部分的表格,input他们的名字,密码,以及什么。 当他们推送提交时,他们实际上是点击一个链接发送邮件到你的服务器。 你已经保存了他们的其他信息,所以这个信息只包含一个标记,说明这是哪个帐户。

扩展@boycs的答案,我会build议也使用“在”。

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

你可以使用jQuery

HTML文件

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

jQuery代码

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

您可以在input框中附加一个“keydown”监听器来检测是否按下Ctrl + V键,如果是,则停止事件或将input框的值设置为“”。

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

但是,也不build议。 禁用粘贴的表单字段是非常令人沮丧的。 我有能力第一次正确input我的电子邮件,所以我保留将其粘贴到第二个框中的权利。

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

有些人可能会build议使用Javascript捕捉用户的操作,如右键单击鼠标或Ctrl + C / Ctrl + V组合键,然后停止操作。 但这显然不是最好的或最简单的解决scheme。 该解决scheme集成在input字段属性本身以及使用Javascript捕获事件。

为了禁用浏览器的自动完成,只需将该属性添加到input字段。 它应该看起来像这样:

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

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

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

下一步是使用onselectstart来拒绝来自用户的input字段的内容select,但要警告:这只适用于Internet Explorer。 上述其余的工作在所有主stream浏览器上都很出色:Internet Explorer,Mozilla Firefox,Apple Safari(至less在Windows操作系统上)和Google Chrome。

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

提交表单之后,您可以在提交和/或服务器端进行AJAX调用。

如果你必须使用2个电子邮件字段,并担心用户错误地粘贴从字段1到字段2的错误电子邮件,那么我会说如果用户粘贴到第二个电子邮件字段中的东西(或更微妙的东西)

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

通过这种方式,您不必禁用粘贴,您只需给他们一个友好的提示,以检查他们在第一个字段中键入的内容,然后粘贴到第二个字段是正确的。

但是,也许只需要一个自动完成的电子邮件字段。 他们有可能在某个时候在另一个网站上正确地填写了他们的电子邮件,并且浏览器会build议用该电子邮件填写该字段

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

我使用这个香草JS解决scheme:

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

在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

简单的解决scheme:只需要反向注册过程:注册过程结束时不需要确认,而是在开始时请求确认! 即注册过程以简单的forms开始,询问电子邮件地址,没有别的。 提交后,将发送一封电子邮件,其中包含指向发送给电子邮件地址的唯一确认页面的链接。 用户转到该页面,然后请求注册的其余信息(用户名,全名等)。

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

我为http://bookmarkchamp.com做了类似的事情; – 在那里我想要检测用户何时将某些东西复制到HTML字段中。 我提出的实施是不断地检查这个领域,看看有没有突然间有很多文字。

换句话说,如果一毫秒前没有文字,现在有五个以上的字符,那么用户可能会在场上粘贴一些东西。

如果您希望在Bookmarkchamp中看到此function(需要注册),请在URL字段中粘贴一个URL(或者在其中拖放一个URL)。

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

  1. 在进行主stream程之前(比如说注册用户),首先要求他们input他们的电子邮件地址。
  2. 生成一个唯一的代码并将其发送到该电子邮件地址。
  3. 如果用户input了正确的电子邮件地址,他们将获得代码。
  4. 用户必须input该代码以及他们的电子邮件地址和其他所需的信息,以便他们可以完成注册。 – 请注意,如果此时他们input了错误的电子邮件地址(或错误的代码),因为它不符合代码,注册将不会通过,用户将立即通知。
  5. 如果电子邮件地址,代码和其他注册信息input正确,注册完成,用户可以立即开始使用系统。 – 无需回应任何其他电子邮件地址,以激活其帐户

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

使用jQuery,你可以避免复制粘贴并使用它剪切

 $('.textboxClass').on('copy paste cut', function(e) { e.preventDefault(); }); 
 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>