HTML5 placeholder attribute details, html5placeholder

HTML5 placeholder attribute details, html5placeholder

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

<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:

Copy the content to the clipboard using JavaScript Code

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

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

Copy the content to the clipboard using JavaScript Code

1. /* Mootools ftw! */
2. Var firstNameBox = $ ('first _ name '),
3. Message = firstNameBox. get ('holder ');
4. FirstNameBox. addEvents ({
5. Focus: function (){
6. If (firstNameBox. value = message) {searchBox. value = '';}
7. },
8. Blur: function (){
9. If (firstNameBox. value = '') {searchBox. value = message ;}
10. }
11. });

Beautify placeholder with CSS

In the previous article, I wrote about how to beautify the text selected by the mouse 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:

Copy the content to the clipboard using CSS Code.

1. /* All */
2. :-Webkit-input-placeholder {color: # f00 ;}
3. :-Moz-placeholder {color: # f00;}/* firefox 19 + */
4. :-Ms-input-placeholder {color: # f00;}/* ie */
5. Input:-moz-placeholder {color: # f00 ;}
7. /* Individual: webkit */
8. # Field2:-webkit-input-placeholder {color: # 00f ;}
9. # Field3:-webkit-input-placeholder {color: #090; background: lightgreen; text-transform: uppercase ;}
10. # Field4:-webkit-input-placeholder {font-style: italic; text-decoration: overline; letter-spacing: 3px; color: #999 ;}
12. /* Individual: mozilla */
13. # Field2:-moz-placeholder {color: # 00f ;}
14. # Field3:-moz-placeholder {color: #090; background: lightgreen; text-transform: uppercase ;}
15. # 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.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.