Watemark to disappear only when user start input in field

Watermark with ajax disappears when field gets focus, which is quite difficult to understand what should I enter in this field if I have not noticed before moving to that field. It's nice to show the water mark until user start entering something into field.

If you have ever used Facebook they are using the same functionality, so let's see how can we do it for our applications.

Easiest way to use the placeholder introduced with HTML5

<input type="text" name="Firstname" placeholder="Enter First name" />
<input type="text" name="Lastname"  placeholder="Enter Last name" />

// For asp.net text box
<asp:TextBox runat="server" id="txtFirstname" MaxLength="50" 
      class="txt-box" placeholder="Enter First name" />    
<asp:TextBox runat="server" id="txtLastname" MaxLength="50" 
      class="txt-box" placeholder="Enter Last name" />

Placeholder property will not be available at design time but once you will render the page it will work smooth without any error. For more detail you should see placeholder attribute on W3c

Since it is a new feature so may not support in user browser, we need to check the browser compatibility if not supported then use the fallback, so let's use jquery and Modernizr to achieve our goal:

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){    
if(!Modernizr.input.placeholder){    
    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });    
}    
</script>

Now it will work in every browser, never matter whether you browser is supporting placeholder or not.

Other blogs you may like

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to... By Ali Adravi   On 12 Jul 2015  Viewed: 17,428

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 331

Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez   On 15 Jun 2013  Viewed: 840

Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage. 1. [AsyncFileUpload][1]: by using this control we can upload a file asynchronously (without postback). The file uploading... By Ali Adravi   On 20 May 2013  Viewed: 6,637

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 6,137