Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the placeholder attribute of HTML5". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to use the placeholder attribute of HTML5" can help you solve the problem.

The placeholder property allows you to display a prompt in a text box, which will be hidden once you enter something in the text box. You may have seen this effect countless times before, but most of those are implemented in JavaScript, and now HTML5 provides native support, and the effect is even better!

HTML code

As you can see, all you need to do is add the placeholder attribute to the declaration tag of the text box. You don't need JavaScript to create this effect at all.

Check whether the browser supports the Placeholder attribute

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

Copy the 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 the 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

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

CSS code

The usage in Firefox is different from that in Google browser. 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 placeholder text. You can even animate the placeholder of the text box. Beautifying your text box may seem like a small thing, but for some interactive sites, the key to success lies in the details. Now that only placeholder is supported in IE10, I believe more and more people will use this native placeholder effect.

This is the end of the content about "how to use the placeholder attribute of HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.