如何禁止用户从一个文本框复制文本到另一个文本框?

如何禁止用户从一个文本框复制文本到另一个文本框?

通常我们在注册的时候要求用户输入电子邮件地址，为了辨认地址是否有效，我们往往会发送一份确认信件。
但是如果用户不小心输入了一个错误的地址，然后再到自己的邮箱中寻找验证信息的时候，那么会发生什么呢？
很明显，用户找不到验证邮件，然后可能会不明所以，然后放弃该站点。
那怎么办呢？我们可以采用和密码的方式一样，让用户输入两次邮箱地址来保证不会犯错误。
但通常会有一个问题，输入一次地址后，然后复制，然后粘贴到第二个地址中。这样的话错误仍然会发生。
为此，我们可以采用一点js来防止用户这么做：
我们使用Jquery库。由于浏览器对copy ,paste 事件的处理不一样（ie 只对表单元素，输入框，图像起作用，而firefox,opera等对文档内起作用），所以我们使用jquery 库，可以避免处理这些事情。

效果图：

1.首先我们需要引入Jquery  库

两种方式：

第一种：我们假设在asp.net 页面中。

<script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery-1.4.2.min.js") %>'></script>

第二种：直接引用啦。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

 

2. 绑定 copy ,paste 事件

Code:

1. <script type="text/javascript">  
2.    $(document).ready(function () {  
3.       $('#id_of_textbox').bind('paste', function (e) {  
4.          e.preventDefault();  
5.          alert("You cannot paste text into this textbox!");  
6.       });  
7.    });  
8. </script>   

id_of_textbox 为输入框的 id 号，这里我们绑定了一个粘贴事件处理。

e.preventDefault(); 为阻止默认的粘贴操作。

然后弹出一个对话框，提示禁止粘贴操作。我在咱们的csdn 编辑器上面复制文字时候也有提示，不知道大家情况一样不？~ | ~

 
  如果在asp.net 页面中，我们规定：

邮箱 ID 为： txtEmail

邮箱确认 ID　为： txtConfirmEmail

我们的js  就可以这样写了：

Code:

1. <script type="text/javascript">  
2.    $(document).ready(function () {  
3.       $('#<%=txtEmail.ClientID%>').bind('copy', function (e) {  
4.          e.preventDefault();  
5.       });  
6.   
7.   
8.       $('#<%=txtConfirmEmail.ClientID%>').bind('paste', function (e) {  
9.          e.preventDefault();  
10.       });  
11.    });  
12. </script>   

上面的代码第一个copy ，是当用户复制第一个邮箱地址时候，把复制行为取消。

第二个 paste,是当用户在第二个确认邮箱中进行粘贴操作时候，取消粘贴行为。

3.适度的美化

我们的效果图还有一个红线圈起的提示框，这个也很简单了，代码如下：

Code:

1. <script type="text/javascript">  
2.    $(document).ready(function () {  
3.       $('#<%=txtEmail.ClientID%>').bind('copy', function (e) {  
4.          e.preventDefault();  
5.           
6.          //显示一个提示层，并设置提示信息和位置样式  
7.          $('#message').text("不能从该输入框进行复制操作...")  
8.                       .css(  
9.                         {  
10.                            left: 20 + $(this).offset().left + $(this).width() + 'px',  
11.                            top: $(this).offset().top + 'px'  
12.                         })  
13.                       .fadeIn(3000, function () { $(this).fadeOut(1500) });  
14.       });  
15.       
16.    //粘贴操作是一样的，我就不写了  
17.    });  
18. </script>   

好了，这样子，我们的目标就实现了，欢迎大家发言。。。。。。。。。。。。。。。。