Examples of using the placeholder attribute in HTML5 and methods to beautify the display effect_html5 tutorial skills

The placeholder attribute 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 those were implemented in JavaScript, but now, HTML5 provides native support, and the effect is even better!

HTML code

Copy code

The code is as follows:

< ;input type="text" name="first_name" placeholder="Your name..." />

You also saw that all you need to do is add the placeholder attribute to the declaration tag of the text box . No JavaScript is required at all 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 definitely do not support it:

Copy code

The code is as follows:

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:

Copy code

The code is as follows:

/* 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 beautifies the INPUT placeholder effect. Let me use simple CSS code to beautify the placeholder text in the text box.

CSS code

Usage in Firefox is different from that in Google Chrome. Their names are easy to understand:

Copy the code

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 the placeholder text. You can even animate the text box placeholder. Beautifying your text boxes may seem like a small thing, but for some interactive websites, the key to success is in the details. Now IE10 only supports placeholder. I believe more and more people will use this native placeholder effect.