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

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



通常我们在注册的时候要求用户输入电子邮件地址，为了辨认地址是否有效，我们往往会发送一份确认信件。

但是如果用户不小心输入了一个错误的地址，然后再到自己的邮箱中寻找验证信息的时候，那么会发生什么呢？

很明显，用户找不到验证邮件，然后可能会不明所以，然后放弃该站点。

那怎么办呢？我们可以采用和密码的方式一样，让用户输入两次邮箱地址来保证不会犯错误。

但通常会有一个问题，输入一次地址后，然后复制，然后粘贴到第二个地址中。这样的话错误仍然会发生。

为此，我们可以采用一点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:

<script type=
"text/javascript"
>

$(document).ready(function
() {

$('#id_of_textbox'
).bind(
'paste'
,
function
(e) {

e.preventDefault();

alert("You cannot paste text into this textbox!"
);

});

});

</script>

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

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

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

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

邮箱 ID 为： txtEmail

邮箱确认 ID　为： txtConfirmEmail

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

Code:

<script type=
"text/javascript"
>

$(document).ready(function
() {

$('#<%=txtEmail.ClientID%>'
).bind(
'copy'
,
function
(e) {

e.preventDefault();

});

$('#<%=txtConfirmEmail.ClientID%>'
).bind(
'paste'
,
function
(e) {

e.preventDefault();

});

});

</script>

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

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

3.适度的美化


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

Code:

<script type=
"text/javascript"
>

$(document).ready(function
() {

$('#<%=txtEmail.ClientID%>'
).bind(
'copy'
,
function
(e) {

e.preventDefault();

//显示一个提示层，并设置提示信息和位置样式

$('#message'
).text(
"不能从该输入框进行复制操作..."
)

.css(

{

left: 20 + $(this
).offset().left + $(
this
).width() +
'px'
,

top: $(this
).offset().top +
'px'

})

.fadeIn(3000, function
() { $(
this
).fadeOut(1500) });

});

//粘贴操作是一样的，我就不写了

});

</script>

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