禁用文本框的复制或粘贴操作?
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从键盘,您可以右键单击并使用鼠标复制并粘贴内容以上是关于禁用文本框的复制或粘贴操作?的主要内容,如果未能解决你的问题,请参考以下文章