Restricted operations in TextArea using jQuery

Sapna
13y
1.8k
0
0

Article

Introduction: In this article we will discuss about how to get restrict the operation using jQuery, Operations like as Copy, Cut and Paste these are the operation which will be restricted in a control by using jQuery. If we want to that the user should be restricted on using copy, cut, paste operations in the TextArea which is a HTML control. it is useful that a person will always type manually in the TextArea which is a restriction in operation of copy paste. So further to do that we have to take a html TextArea and a Label. Whenever we will copy some text to the TextArea then it will fire an event and also give a message in a message window. Let's we are going to do that in some steps which is given below.

Step 1: Firstly we have to take a website application let see below

Go to Visual Studio 2010.
Take a New Website application.
Click OK.

website application

Step 2: Secondly you have to add a new page to the website let see how it will added.

Go to the Solution Explorer.
Right Click o Project name.
Select add new item.
Add new web page and give it a name.
Click OK.

Add new item

New Web Page

Step 3: From where you have to add the reference to the head section let see the figure given below.

Solution Explorer

Step 4: In this step we have to add the reference of script files which is written in the head section of the source page of default2.aspx file.

Code is given below:

Code reference

Step 5: In this step we will write the jQuery code for the TextArea which will restrict the operations.

JQuery Code

Code Description: In this method of the jQuery bind() function binds one or more events to a handler. Further in this function we will observe how convenient it is to list
multiple events cut, copy, paste together and bind it to a handler. Which will prevent the user of doing this copy, cut, paste operation. If the user performs any of these events on the TextArea, the default behavior is prevented using e.preventDefault() and the user is alerted. The e.type describes the type of event performed.

Step 6: In this step we are providing the complete code which is described below which is being written to the default2.aspx page.

Code: In the code below we are merging thea code and also take some control named as TextArea and a Label whose code written in the body of the page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#Txta1').bind('cut copy paste', function (e) {
               e.preventDefault();
                alert('You are trying to ' + e.type + ' text in to textarea !');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
<div class="bigDiv">
<h2 style="background-color: #E085B5; font-family: 'Comic Sans MS';">Restricted Cut, Copy and Paste Operations in a TextArea</h2>
<br /><br />
<asp:Label ID="lbl1" runat="server"
Text="Enter the Text which is Copied or Paste" Font-Names="Comic Sans MS"
        ForeColor="#FF6666"></asp:Label>
    <br />
<textarea id="Txta1" rows="2" cols="20"
        style="border-style: groove; border-width: thick; border-color: #008080 #602042 #FF8080 #008080; background-color: #FFCCFF"></textarea>
<br /><br /><br />
</div>
</form>
</body>
</html>

Step 7: In this Step we see the design of the Default2.aspx page which is given below.

Design of Window

Step 8: In the last step we have to run the application by pressing F5.

First output shows the copy restriction if you are copying some text from TextArea

This output shows you that you are pasting some text to the TextArea

This one showing that you are cutting some text from the TextArea