Detailed introduction of placeholder attribute in html
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!
