How to Use the placeholder attribute in HTML5 to use instances and beautify the display effect _ html5 tutorial tips-

HTML5 introduces many interesting new features. Some are embodied in HTML and some are JavaScriptAPI, which are all very useful. One of my favorite features is the placeholder attribute in the text box (INPUT), which enables you to display prompt information in the text box. Once you enter any information in the text box, the prompt information is hidden. You may have seen this effect countless times before, but most of them are implemented in JavaScript. Now, HTML5 provides native support, and the effect is better!

HTML code

The Code is as follows:

As you can see, all you need to do is add the placeholder attribute to the declaration label of the text box. JavaScript is not required to create this effect.

Check whether the browser supports the Placeholder attribute.

Because placeholder is a new attribute, it is necessary to check whether your browser supports it. For example, IE6 and IE8 certainly do not support it:

The Code is as follows:

Function hasPlaceholderSupport (){
Var input = document. createElement ('input ');
Return ('placeholder' in input );
}

If your browser does not support the placeholder feature, you need to use MooTools, Dojo, or other JavaScript tools to implement it:

The Code is as follows:

/* Mootools ftw! */
Var firstNameBox = $ ('first _ name '),
Message = firstNameBox. get ('holder ');
FirstNameBox. addEvents ({
Focus: function (){
If (firstNameBox. value = message) {searchBox. value = '';}
},
Blur: function (){
If (firstNameBox. value = '') {searchBox. value = message ;}
}
});

Beautify placeholder with CSS

In further research, I found another interesting CSS function: CSS beautifies the INPUT placeholder effect. Let me use simple CSS code to beautify the placeholder text in the text box.

CSS code

Firefox uses the same method as Google Chrome. Their names are well understood:

The Code is as follows:

/* All */
:-Webkit-input-placeholder {color: # f00 ;}
:-Moz-placeholder {color: # f00;}/* firefox 19 + */
:-Ms-input-placeholder {color: # f00;}/* ie */
Input:-moz-placeholder {color: # f00 ;}
/* Inpidual: 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 ;}
/* Inpidual: 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 animation the placeholder in the text box. Beautifying your text box is very small, but for some interactive websites, the key to success lies in the details. Now IE10 only supports placeholder. I believe more and more people will use this native placeholder effect.