Smart technique to make placeholder to work in all the browsers

The placeholder attribute specifies a short hint that describes the expected value of an input field, the short hint is displayed in the input field before the user enters a value. The placeholder attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Its a pain for developers to make it work for browsers which doesn’t support placeholder. We do have lots of plugins, which will enable us to fix this issue, however most of them are complicated solutions.

Well, I have a simple solution to make it work for browsers which does not support placeholder.

1. Please add the latest jquery reference to the page  [I have used jquery.1.11.1 ]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Design the page with placeholder attribute


<input type="text" name="firstName" placeholder="First name">
eg: 

3. Just add the magic script to the page.


$.support.placeholder = ('placeholder' in document.createElement('input'));
if (!$.support.placeholder) {
      $('[placeholder]').each(function () {
            if ($(this).val() === "") {
                  $(this).val($(this).attr("placeholder"));
                  $(this).addClass("placeholderstyle");
            }
      });
      $("[placeholder]").focus(function() {
            if ($(this).val() === $(this).attr("placeholder")) {
                  $(this).val("");
                  $(this).removeClass("placeholderstyle");
            }
      }).blur(function() {
            if ($(this).val() === "") {
                  $(this).val($(this).attr("placeholder"));
                  $(this).addClass("placeholderstyle");
            }
      });
}

Basically we are checking the browser supports place holder attribute or not. If it returns false, we inject our piece of code. On load we move the place holder data to value attribute, so when the page loads place holders are already in place. Two basic placeholder events are blur and focus, on focus we remove the value and on blur we put the value back. To look like placeholder we can add simple css styling, in this case I use ‘placeholderstyle’ with color #B1A9B1.

Simple Solution … 🙂

Google Launches Web Designer, A Visual Tool For Building Interactive HTML5 Websites

Google has released a new professional HTML5 design application on Sept 30th 2013 named Google Web Designer for building interactive HTML5 sites and ads. The Google Web Designer enables users to create animated HTML5 creative content, 3D effects, design view and code view. Google calls a professional-quality design tool, is now officially in public beta and available for download for Mac and Windows

google web designer
google web designer

 

Features:

  • Create Animations: Google Web Designer provide quick mode and advanced mode. In Quick mode, build your animations scene by scene and we’ll take care of the frames in between. In Advanced mode, animate individual elements using layers, easily changing the location of elements within the stack.
  • 3D Effects: Create and manipulate 3D content utilizing an array of tools and the power of CSS3. Rotate objects and even 2D designs along any axis, visualizing 3D transformations and translations as you author.
  • Design view and code view: While a visual tool is helpful, it can never represent your creativity, imagination and vision in full. That’s why you can flip back and forth between Design View and Code View as you work, immediately seeing any changes made to code reflected back in your designs.
  • Illustration tools: Import assets from any other creative suite or use the built-in illustration tools to create vector-style artwork – keeping your designs light. To create new HTML tags in your designs, just draw them in with the Tag tool.
  • Ad workflow: Google Web Designer makes it simple to publish ads through any platform. Choose from DoubleClick Studio or AdMob, or go for the Generic option to push content through any other ad network. No coding required.

Please follow the link to download Google Web Designer.