Default values in ASP Textbox with JQuery

Sometimes you will need to add instructions to textboxes to provide input information to the user. We can use default text to do this. This is the text that will appear in the textbox when it is empty.


Step 1

If you don't have jQuery then download latest library from its website and include in the script section of your page.

<script src="jquery.js" type="text/javascript"></script>

 

Step 2

Next you need to create two CSS classes - defaultText and defaultTextActive as shown below. These are described in Step 3.

<style media="screen" type="text/css">

   .defaultText { width: 300px; }

   .defaultTextActive { color: #a1a1a1; font-style: italic; }

</style>

Step 3

Add the following JavaScript to you page. This associates the CSS classes with the appropriate JQuery methods.

<script language="javascript">

$(document).ready(function()

{

    $(".defaultText").focus(function(srcc)

    {

        if ($(this).val() == $( this)[0].title)

        {

            $(this).removeClass("defaultTextActive");

            $(this).val("");

        }

    });

   

    $(".defaultText").blur(function()

    {

        if($(this).val() == "")

        {

            $(this).addClass("defaultTextActive");

            $(this).val($(this)[0].title);

        }

    });

    $(".defaultText").blur();       

});

</script>

Step 4

To every text field or text area where you want to apply default text, add "defaultText" as its css class and specify the default text in the title attribute. e.g.
 

<input class="defaultText" title="e.g. someone@example.com" type="text" />

ASP.Net Textbox - Adding Decimal Validation via JQuery

Technology:
 
ASP.Net Framework 4.0
JQuery
 
Its pretty frustrating that ASP.Net does not have built in 'decimal only' validation for texboxes. I attempted to create my own using simple Javascript, but my requirement was too complex. I needed to implement the following restrictions:
 

• allow positive AND negative numbers (therefore numbers with a single '-' at the beginning, or with a single decimal point are allowed)
• Validation independant of cursor location - if a number has been entered and the cursor is moved to the beginning the user may enter a negative symbol
• No flash of invalid characters on keypress (so simple Javascript 'find & replace' won't work)
• Allow backspace, enter, left/right arrows and other non character keypress events

 
I eventually stumbled across a neat solution at http://brianjaeger.com/process.php

To implement it, I added the jquery.limitkeypress.js file to my solution. Any textbox which required this validation was assigned the class 'decimal.' In my master page's javascript file, I had the following code to apply the jQuery to any textbox with a class of 'decimal' (I was using my own regex expression which can be passes as a parameter to the JQuery library):

// ^ - start of string anchor
// (-)? - match a '-', optional
// \d* - match zero or more digits
// \. - match a '.'
// \d{0,decPlaces} - match up to specified num of dps
// )? - decimal points are optional
// $ - end of string anchor
$('.decimal').limitkeypress({ rexp: /^(-)?\d*(\.\d{0,4})?$/ });





 

Using JQuery Draggable on ASP Panel & DOM Objects

Technology: 

ASP.Net (.NET Framework 4.0)
jQuery UI - v1.10.3

jQuery - v1.8.0

The .draggable() Jquery function allows DOM objects to be moved around the screen. After some failed attempts at creating my own Javascript to do this within my ASP.Net project, I stumbled upon this simple function, to both my relief and frustration that I had wasted so much time!

Firstly I had to download the jQuery 1.8.0 and JQuery UI 1.10.3 libraries and add these to my ASP.Net project. I then added reference to them in the scripts section of my Master page.

For my scenario, I needed to drag a panel which existed on a child page. I created the panel as follows:

<asp:Panel ID="contentPanel" CssClass="draggable" runat="server" Style="z-index: 125; left: 300px; position: absolute; top: 200px;">

Note the 'draggable' class. I then needed to link this panel to the JQuery method from the J Query UI library so it could be draggable; I created a javascript file for my ASP page and added it as reference at the top of my ASP page:

    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

    </asp:ScriptManagerProxy>

    <script src="../../Scripts/CustomPage.js" type="text/javascript"></script>

Within the CustomPage.js file, I added the following code:

function pageLoad() {

    $('.draggable').draggable();

}

Provided all is set up properly, the draggable() method will be applied to all objects that have a class of 'draggable.' JQuery takes care of the rest.

Note that originally I had used $(document).ready() instead of pageLoad() to contain my JQuery call. This caused problems as I had so many Ajax Update Panels and partial postbacks happening - PageLoad() fires when the page is loaded (like  $(document).ready()),

but also for partial postbacks via update panels. I had been seeing problems with $(document).ready() because when a partial postback occurred, my JQuery association got dropped and it would only be recreated next time a full page load occurred i.e. in $(document).ready().