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

时间:2014-06-26 06:56:25

标签: javascript jquery

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

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

我脑子里有两个解决方案:

  1. 阻止来自电子邮件文本框的复制操作,或
  2. 阻止来自confirmEmail文本框的粘贴操作。
  3. 关于如何做的任何想法?

    http://jsfiddle.net/S22ew/

10 个答案:

答案 0 :(得分:58)

检查这个小提琴fiddle

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

你需要绑定剪切,复制粘贴应该做什么。你可以防止操作的默认行为。 您可以找到详细解释here

答案 1 :(得分:22)

使用

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/

答案 2 :(得分:4)

以下是更新后的fiddle

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

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

希望它有所帮助。

答案 3 :(得分:4)

试试这个

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

答案 4 :(得分:4)

ondrop="return false;"
onpaste="return false;"

在HTML中的必填文本框中使用这些属性。现在禁用了拖放和粘贴功能。

答案 5 :(得分:3)

您可以尝试以下操作:

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

答案 6 :(得分:1)

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

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

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

答案 7 :(得分:0)

最好的方法是在要避免剪切,复制和粘贴的字段(文本框)中添加数据属性。

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

function ignorePaste() {

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

};

然后,在添加以上代码时,只需将data属性添加到要忽略剪切副本粘贴的字段即可。在本例中,您添加了data属性以确认电子邮件文本框,如下所示:-

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

调用方法ignorePaste()

因此,您可以在整个应用程序中使用它,只需将data属性添加到要忽略剪切副本粘贴的位置即可。

library source code

答案 8 :(得分:0)

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

				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>

答案 9 :(得分:-1)

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

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