如何禁止用戶從一個文本框複製文本到另一個文本框?

如何禁止用戶從一個文本框複製文本到另一個文本框?

通常我們在註冊的時候要求用戶輸入電子郵件地址，爲了辨認地址是否有效，我們往往會發送一份確認信件。
但是如果用戶不小心輸入了一個錯誤的地址，然後再到自己的郵箱中尋找驗證信息的時候，那麼會發生什麼呢？
很明顯，用戶找不到驗證郵件，然後可能會不明所以，然後放棄該站點。
那怎麼辦呢？我們可以採用和密碼的方式一樣，讓用戶輸入兩次郵箱地址來保證不會犯錯誤。
但通常會有一個問題，輸入一次地址後，然後複製，然後粘貼到第二個地址中。這樣的話錯誤仍然會發生。
爲此，我們可以採用一點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 事件

<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  就可以這樣寫了：

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

轉載來自  http://student.csdn.net/space.php?uid=464378&do=blog&id=38634