Cross browser placeholder using javascript

Cross browser placeholder using javascript

Placeholders for text input elements are very important. You must be aware that having a cross browser placeholder is very important for your website. Users may not be visiting your website form the same device or same interface each time. Every browser has some drawbacks and some of the major browsers still do not support the attribute “placeholder”.

Input elements have this attribute “placeholder” and they work only for certain selected browsers and versions. However, placeholders have a strong significance in your development process.

Users maybe misguided by the format of your input. For example, you want the name field to be filled in as “Lastname Firstname” or the date field as “MM/DD/YY”. Your user doesn’t know this. Because, you have set a “placeholder” attribute in the input elements but due to the browser it isn’t being displayed.

This calls for a cross browser compatible system. A code that must be available in all browsers and all versions (unless of course the very primitive ones). This can only be achieved with JavaScript.

Our stepping stone to create a cross browser placeholder

The idea is basically simple. We must create input boxes that have a guiding text as to what should be the appropriate input in that textbox.

For this we write a very simple code in JQuery,

Are you a novice in JQuery? Try my article JQuery basic usage for beginners to gain confidence now!

$(document).ready(function(){
	// To keep the placeholder activated onload..
                $("input").val("Enter name – e.g. Banerjee Kaustav");
                /* When the textbox is in focus, the placeholder is forcefully disabled */
$("input").focus(function(){
	/* make text blank only if this field was containing no user given text */
	if($(this).val() === 'Enter name – e.g. Banerjee Kaustav'){
$(this).val("");
}
});
/* When the textbox is not in focus, the placeholder is enabled */
$("input").blur(function(){
	/* show placeholder only if this field has been left empty */
	if($(this).val() === ''){ 
$(this).val("Enter name – e.g. Banerjee Kaustav");
}
});

            });

After this code, you need mention any placeholder separately. In fact, if both are applied there might be a chance of interference and malfunctioning. So, it is best to keep the above option. Whenever your user opens up your website in no matter what browser; the placeholder is always present. But, of course JavaScript must be enabled in such browsers.

Advantages of a JavaScript cross browser placeholder

One of the best features of a JavaScript cross browser placeholder is that you can customize the CSS of this placeholder according to your wish. So, maybe you want a stylish font for your placeholder text – just put it in the style block of the input element and it automatically gets implemented. Font color, size, padding, letter spacing, font style, font weight and all such style attributes can be implemented in these placeholder texts.

Surprised? Well, this is simple and fun. Since this placeholder is nothing but the text or “value” attribute of the input box, you are being able to customize it. Make a note here; you can never change styling of an inbuilt placeholder.

So, there you go. I gave you another advantage of using a cross browser placeholder made form JavaScript.

Cross browser placeholder in web development

Placeholders are starting to get support from the W3 community. They are gaining more and more browser support day by day. But IE is yet to support these attributes fully. You might find IE previous versions like IE 7 and 8 do not support this at all. Your only way out is a JavaScript placeholder at that time.

Placeholders play an important role in user friendliness and interactivity. You must never ignore them.

Comments are closed.