How to Use the placeholder attribute in html5.

Source: Internet
Author: User
Tags mootools

Comments: HTML5 introduces many interesting new features, some of which are embodied in HTML and some are JavaScript APIs, all of which are very useful. One of my favorite features is the placeholder attribute in the text box (INPUT ).

The placeholder attribute allows you to display the 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. Now, HTML5 provides native support, and the effect is better!

HTML code

The Code is as follows: <input type = "text" name = "first_name" placeholder = "Your name..."/>
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 ;}
/* 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 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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.