Anything For Knowledge In IT: June 2012

Thursday, June 7, 2012

Disable Cut Copy Paste in Text box using JQuery

Many a times you would have observed that websites does not allow you to copy and paste the password or some other stuff in the text box.
In this article we will see how that functionality can be achieved in few lines of code using jquery.

Step 1. Create an aspx page with following markup.

<body>

<div>

<tr>

<td colspan="2" class="header">Login</td>

</tr>

<tr>

<td> <asp:Label id="lblUser" Text="UserName:

" runat="server"/>

</td>

<td> <asp:TextBox ID="txtUser" Width="200px"

runat="server" ></asp:TextBox>

</td>

</tr>

<tr>

<td><asp:Label id="lblPwd" Text="Password:"

runat="server"/></td>

<td><asp:TextBox ID="txtPwd" Width="200px" runat="server"

TextMode="Password"></asp:TextBox></td>

</tr>

<tr><td></td><td><asp:Button ID="btnSubmit" runat="server"

Text="SUBMIT" />

<asp:Button ID="btnReset" runat="server" Text="RESET" /></td></tr>

</table>

</fieldset>

</div>

</form>

</body>

Step 2. In the $(document).ready(function(){}) of jquery inject the following scritp(self explanatory).

$(document).ready(function() {

//Step 1. get that textbox in which you want to prevent the cut copy

//paste operation and use the jquery's bind event to bind event

//handler for cut copy and paste dom event

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

e.preventDefault();

alert("cut / copy / paste disabled in this textbox!");

}); //jquery bind event ends here

}); //$(document).ready ends here...

</script>

Note : you can get more info on .bind from www.jquery.com and DOM event list from http://en.wikipedia.org/wiki/DOM_events .

Quick Tips :
1. you can prevent right click on page using

//Prevent right click to pop up contextmenu

$(this).bind('contextmenu', function(e) {

e.preventDefault();

});

2. And if you want to disable the text selection in your web page then use following:

Replace "this" from any div id where you dont want selection otherwise leave this as it is, which will prevent selection in the entire page.

$(this).children().each(function(i, c) {

disableSelection(c);

});

function disableSelection(target) {

//alert(target)

if (typeof target.onselectstart != "undefined") //For IE

target.onselectstart = function() { return false }

else if (typeof target.style.MozUserSelect != "undefined") //For Firefox

target.style.MozUserSelect = "none"

else //All other route (For Opera)

target.onmousedown = function() { return false }

target.style.cursor = "default"

}

Wednesday, June 6, 2012

Handling Master Page's Control event in Child Page

One of the favourite query in interviews is how to handle the event of a control which is in Master Page from the child page.
We will see in the following simple steps how to do that.
Step 1. Create a new website using VS.
Step 2. Create a master page with following content.

<body>

<div style="height:50px; background-color:Yellow;">Header

<br />

<asp:RadioButtonList ID="RadioButtonList1" runat="server"

RepeatDirection="Horizontal" AutoPostBack="True"

onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">

<asp:ListItem>Video</asp:ListItem>

<asp:ListItem>Text</asp:ListItem>

<asp:ListItem>Audio</asp:ListItem>

</asp:RadioButtonList>

</div>

<div >

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

dsf

</asp:ContentPlaceHolder>

</div>

<div style="height:20px; background-color:blue;">Footer</div>

</form>

</body>

What we have done here : We have taken a control in master page that is a radio button list.

Step 3. Get the selected index change event of Radiobutton list and you will see that it is in master page.
as shown here..

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

{

}

but we want to call it from child page right!

Step 4. Create a child page with the master page selected.

Now both the master page and child page in place lets move further..

Step 5. In order to expose any control of master page to child pages we need to expose it as public property of the master page. So in code behind of master page create a public property which will expose the radio button list control to child pages.

public RadioButtonList ContentList

{

get { return RadioButtonList1; }

}

Step 6. Go to the childpage.aspx and set the following directive, without which that public property would not be available in child page.

<%@ MasterType VirtualPath="~/DefaultMaster.master" %>

Step 7. In code behind of child.aspx create an event handler that will handle the event of radio button list.

protected void ContentList_SelectedIndexChanged(object sender, EventArgs e)

{

}

Step 8. So we have an event handler now in child page which will be called when the radio button list control in master page is clicked. As a final step we need to assign this event to the radiobuttonlist.selectedeventchanges event in page load as follows:

protected void Page_Load(object sender, EventArgs e)

{

this.Master.ContentList.SelectedIndexChanged += new EventHandler(ContentList_SelectedIndexChanged);

}

Step 8. Put a breakpoint in the ContentList_SelectedIndexChanged and see when you click the radiobuttonlist in master page this event of child page is being called.

Hope this helped!

Friday, June 1, 2012

Default Text For Textboxes using JQuery

Many a times you would have seen in web that there is some default text in text boxes to help user to suggest that they have to enter something in the textbox, and as soon as the user clicks on text box that default text disappears. We will achieve the same in this article.

Step 1. Add the following markup in your aspx page.

<p></p>

<p>

<asp:TextBox ID="txtSearch" width="200px" CssClass="defaultText" ToolTip="Enter your search keyword here" runat="server"></asp:TextBox>

<asp:Button ID="btnSubmit" Text="SEARCH" runat="server"/>

</p>

</fieldset>

</div>

</form>

Step 2. Add the following style tab to your aspx page.

.defaultText

{

font-style:italic;

color:#CCCCCC;

}

</style>

Step 3. Finally add the following script to your page. The Script is self explanatory.

$(document).ready(function() {

//Step 1. In the document.ready() function, retrieve the TextBox

//control using its ClientID

//and save in a local variable:

var searchBox = $('#<%=txtSearch.ClientID%>');

//Step 2. On the focus event, check if it contains the default

//text:

searchBox.focus(function() {

//The ToolTip property of the ASP.NET TextBox control is

rendered

//as title at runtime. Thus, the ToolTip text Enter your

//search keyword here is retrieved using this.title.

if (searchBox.val() == this.title) {

//Step 3. If yes, then remove the defaultText css style:

searchBox.removeClass("defaultText");

//Also clear the search field:

searchBox.val("");

}

}); //searchBox.focus() function ends here...

//Step 3. On the blur event, check if the TextBox is empty:

searchBox.blur(function() {

if (searchBox.val() == "") {

//if yes then attach the defaultText css class

searchBox.addClass("defaultText");

//Add the default information text to the search field:

searchBox.val(this.title);

}

}); //searchBox.blur() function ends here...

//Step 4. Call the blur event on page load so that the TextBox is

//initially out of focus:

searchBox.blur();

});

</script>

run it.

Note :

ClientID is a unique server control identifier generated by ASP.NET to avoid duplicate IDs when controls are repeated; say, for example, in a Repeater control. It is generated by concatenating the ID of the control with the UniqueID of its parent control. Underscore character (_) is used to separate each part of the generated ID.

See more in future installment...