Detailed explanation of HTML5 placeholder attribute

This article mainly introduces HTML5 placeholderattributes. The placeholder attribute allows you to display prompt information in the text box. Interested friends can refer to it.

HTML5 introduces many interesting new features; some are reflected in HTML, some are JavaScript API, 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 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

<input type="text" name="first_name" placeholder="你的姓名..." />

As you can see, 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, such as IE6 and IE8 are definitely not supported:

JavaScript Code复制内容到剪贴板
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 otherJavaScript tools to implement it:

JavaScript Code复制内容到剪贴板
/* 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; }
 }
});

Use CSS to beautify placeholder

In the previous article, I wrote how to use CSS to beautify the text selected by the mouse. While researching further, 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

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

CSS Code复制内容到剪贴板
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* inpidual: 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; }

/* inpidual: 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 display the placeholder of the text box in an animation way. 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.

The above is the detailed content of Detailed explanation of HTML5 placeholder attribute. For more information, please follow other related articles on the PHP Chinese website!