禁用文本框的复制或粘贴操作?

Posted

技术标签:

【中文标题】禁用文本框的复制或粘贴操作?【英文标题】:Disable Copy or Paste action for text box? 【发布时间】:2014-08-16 22:24:59 【问题描述】:

我有两个文本框,我想阻止用户从第一个(电子邮件)文本框中复制值并将其粘贴到第二个(确认电子邮件)文本框中。

Email: <input type="textbox" id="email"><br/>
Confirm Email:    <input type="textbox" id="confirmEmail">

我有两个解决方案:

    阻止电子邮件文本框中的复制操作,或 阻止来自 confirmEmail 文本框的粘贴操作。

你知道怎么做吗?

http://jsfiddle.net/S22ew/

【问题讨论】:

请不要这样做...我发现必须输入我的电子邮件地址两次是非常糟糕的用户体验,这让我想尽快离开网站。没有什么能阻止我两次犯同样的错误。 它将帮助您禁用剪切、复制、粘贴操作 - kvcodes.com/2014/03/… 我太讨厌“确认电子邮件”字段 - 糟糕的用户体验 :( 更糟糕的是,我必须输入银行信息等长帐号。您可以安全地从银行复制您的帐号并将其粘贴到一个字段中,而不必担心会乱用任何东西,但是如果您强迫某人自己输入它,则可能会出错。不要这样做。这很傻。我讨厌这样做的网站。 【参考方案1】:

检查this fiddle。

 $('#email').bind("cut copy paste",function(e) 
     e.preventDefault();
 );

你需要绑定在剪切、复制和粘贴上应该做的事情。您阻止该操作的默认行为。

你可以找到a detailed explanation here。

【讨论】:

不错。如果用户在加载时遇到问题,那么将其包装为“文档就绪处理程序”可能会有所帮助。即 jQuery(function ($) );参考:***.com/questions/19373455/… 现在应该使用 .on()【参考方案2】:

使用

oncopy="return false"onpaste="return false"

Email: <input type="textbox" id="email" oncopy="return false" onpaste="return false" ><br/>
Confirm Email:    <input type="textbox" id="confirmEmail" oncopy="return false" onpaste="return false">

http://jsfiddle.net/S22ew/4/

【讨论】:

【参考方案3】:

前:

<input type="textbox" ondrop="return false;" onpaste="return false;">

html 的必需文本框中使用这些属性。现在拖放和粘贴功能已禁用。

【讨论】:

你给他们的一段可爱的代码。其余的不工作【参考方案4】:

这是更新后的fiddle。

$(document).ready(function()
    $('#confirmEmail').bind("cut copy paste",function(e) 
        e.preventDefault();
    );
);

这将防止在确认电子邮件文本框中剪切复制粘贴。

希望对你有帮助。

【讨论】:

【参考方案5】:

试试这个

 $( "#email,#confirmEmail " ).on( "copy cut paste drop", function() 
                return false;
        );

【讨论】:

@mr-cocococo 如果您需要小提琴,请告诉我 这个答案解释了从 jQuery 3.0 开始弃用的“绑定”:api.jquery.com/category/deprecated/deprecated-3.0jsFiddle:jsfiddle.net/JoePC/S22ew/702 @TusharDave 这反而帮了我e.preventDefault();。谢谢你:)【参考方案6】:

你可以试试这个:

   <input type="textbox" id="confirmEmail" onselectstart="return false" onpaste="return false;" oncopy="return false" oncut="return false" ondrag="return false" ondrop="return false" autocomplete="off">

【讨论】:

【参考方案7】:

更新:接受的答案提供了解决方案,但 .on() 是从现在开始应该使用的方法。

“从 jQuery 3.0 开始,.bind() 已被弃用。自 jQuery 1.7 起,它已被用于将事件处理程序附加到文档的 .on() 方法取代,因此不鼓励使用它。”

http://api.jquery.com/bind/

【讨论】:

【参考方案8】:

执行此操作的最佳方法是向要避免剪切、复制和粘贴的字段(文本框)添加数据属性。

只需为其创建一个方法,如下所示:-

function ignorePaste() 

$("[data-ignorepaste]").bind("cut copy paste", function (e) 
            e.preventDefault(); //prevent the default behaviour 
        );

;

然后,当您添加上述代码时,只需将数据属性添加到您要忽略剪切复制粘贴的字段。在我们的例子中,您添加一个数据属性来确认电子邮件文本框,如下所示:-

Confirm Email: <input type="textbox" id= "confirmEmail" data-ignorepaste=""/>

调用方法ignorePaste()

因此,通过这种方式,您将能够在整个应用程序中使用它,您只需在要忽略剪切复制粘贴的地方添加数据属性

https://jsfiddle.net/0ac6pkbf/21/

【讨论】:

【参考方案9】:

您可能还需要向您的用户提供警告,表明这些功能已对文本输入字段禁用。这将起作用

				function showError()
					alert('you are not allowed to cut,copy or paste here');
				
				
				$('.form-control').bind("cut copy paste",function(e) 
					e.preventDefault();
				);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control"  oncopy="showError()" onpaste="showError()"></textarea>

【讨论】:

【参考方案10】:

参见this 示例。您需要绑定事件密钥传播

$(document).ready(function () 
    $('#confirmEmail').keydown(function (e) 
        if (e.ctrlKey && (e.keyCode == 88 || e.keyCode == 67 || e.keyCode == 86)) 
            return false;
        
    );
);

【讨论】:

它只是禁用,Control + C,Control + V从键盘,您可以右键单击并使用鼠标复制并粘贴内容

以上是关于禁用文本框的复制或粘贴操作?的主要内容,如果未能解决你的问题,请参考以下文章

clipboard.js-复制文本到粘贴板

VB复制文本框文本问题

百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,或者谁知道该如何操作

从禁用的文本框复制到剪贴板

文本框放大镜问题 iOS

C#限制文本框输入