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

This article mainly explains "the detailed introduction of placeholder attributes in html". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "the detailed introduction of placeholder attributes in html"!

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:

1.function hasPlaceholderSupport () {

2. Var input = document.createElement ('input')

3. Return ('placeholder' in input)

4.}

5.

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

1.Compact * mootools ftw! * /

2.var firstNameBox = $('first_name')

3. Message = firstNameBox.get ('placeholder')

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.})

twelve。

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

1.Compact * 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;}

6.

7.Compact * 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;}

11.

12.Compact * 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;}

16.

At this point, I believe you have a deeper understanding of the "detailed introduction of placeholder attributes in html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.