Comment: Many interesting new features have been introduced in HTML5; some are reflected in HTML, some are JavaScript APIs, all of which are very useful. One of my favorite features is the placeholder property in the text box (INPUT).
The placeholder property allows you to display prompt information in the text box. Once you enter any information in the text box, the prompt information will be hidden. You may have seen this effect countless times before, but most of them are implemented in JavaScript, and now HTML5 provides native support and it works better!
HTML code
You have also seen that all you need to do is add the placeholder attribute to the declaration label of the text box. JavaScript is not needed at all to create this effect.
Check whether the browser supports the Placeholder attribute
Because placeholder is a new property, it is very necessary to check whether your browser supports it. For example, IE6 and IE8 are definitely not supported:
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
If the user's browser does not support the placeholder feature, you need to use MooTools, Dojo, or other JavaScript tools to implement it:
/* mootools ftw! */
var firstNameBox = $('first_name'),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value == message) { searchBox.value = ''; }
},
blur: function() {
if(firstNameBox.value == '') { searchBox.value = message; }
}
});
Beautify placeholder with CSS
During further research I discovered another interesting CSS feature: CSS beautifying the INPUT placeholder effect. Let me use simple CSS code to beautify the placeholder text in the text box.
CSS Code
The usage in Firefox browser is different from that in Google Chrome. Their names are easy to understand:
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
You can control the font, color and style of placeholder text. You can even display the placeholder of the text box in animated way. Beautifying your text boxes is something that looks small, but for some interactive websites, the key to success lies in the details. Now IE10 only supports placeholder. I believe that more and more people will use this native placeholder effect.