Tuesday 8 October 2013

Tutorial 2: Disable CUT, COPY and PASTE options for TextBox using jQuery

Leave a Comment
In my previous article, I've explained how to create default text or Watermark text for empty TextBox in ASP.NET using jQuery. You can also see list of ASP.NET+jQuery tutorials. In this tutorial, I am going to explain how to disable CUT, COPY and PASTE functionality for TextBox using jQuery in ASP.NET applications. Sometimes we want to restrict users to perform CUT, COPY and PASTE operations in few scenarios like confirming email address or confirming password or requesting sensitive information.

Create a new web form Example1.aspx in ASP.NET web application. Create two TextBox : txtEmail and txtEmailConfirm.
 <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
 <asp:TextBox ID="txtEmailConfirm" runat="server"></asp:TextBox> 
  • In the document.ready() event, use bind to attach the required event handler for cut, copy, and paste events for txtEmail TextBox.
     $("#<%=txtEmail.ClientID%>").bind('cut copy paste', function (e) {
    
  • Override the default cut, copy, paste behavior of event and display alert box.
     e.preventDefault();
     alert("Cut Copy Paste is disabled for this textbox");
    
  • Repeat above steps for txtEmailConfirm TextBox.
     $("#<%=txtEmailConfirm.ClientID%>").bind('cut copy paste', function (e) {
                    e.preventDefault();
                    alert("Cut Copy Paste is disabled for this textbox");
                });

Complete Code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Tutorial 2: Disable Cut Copy Paste for Textbox using jQuery</title>
    <script src="js/jquery-1.8.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#<%=txtEmail.ClientID%>").bind('cut copy paste', function (e) {
                e.preventDefault();
                alert("Cut Copy Paste is disabled for this textbox");
            });
            $("#<%=txtEmailConfirm.ClientID%>").bind('cut copy paste', function (e) {
                e.preventDefault();
                alert("Cut Copy Paste is disabled for this textbox");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Enter Email Id</td>
                    <td>
                        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Confirm Email Id</td>
                    <td>
                        <asp:TextBox ID="txtEmailConfirm" runat="server"></asp:TextBox></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
In above jQuery code, I've repeated same logic for second TextBox txtEmailConfirm. What if we have to do same task for multiple TextBoxes? We'll be ending up by repeating same logic for every TextBox. This task can be minimized by adding a common CSS Class (like class="txtdisable") to the TextBox controls on which we want to disable CUT, COPY and PASTE options and then using jQuery to disable controls having common specific CSS Class. See below source code for reference:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Tutorial 2: Disable Cut Copy Paste for Textbox using jQuery</title>
    <script src="js/jquery-1.8.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".txtdisable").bind('cut copy paste', function (e) {
                e.preventDefault();
                alert("Cut Copy Paste is disabled for this textbox");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Enter Name</td>
                    <td>
                        <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Enter Email Id</td>
                    <td>
                        <asp:TextBox ID="txtEmail" runat="server" CssClass="txtdisable"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Confirm Email Id</td>
                    <td>
                        <asp:TextBox ID="txtEmailConfirm" runat="server" CssClass="txtdisable"></asp:TextBox>
                    </td>
                </tr>

            </table>
        </div>
    </form>
</body>
</html>


Source code can be downloaded from GitHub. Comments and suggestions are most welcome. Happy coding!

0 comments :

Post a Comment