Introduction to HTML5 placeholder (blank prompt) attribute_html5 tutorial skills

Original address: HTML5′s placeholder Attribute
Demo address: placeholder demo
Original date: August 9, 2010
Translation date: August 2013 On the 6th
the browser introduced many HTML5 features: some are based on HTML, some are in the form of JavaScript APIs, but they are all useful. One of my favorites is the introduction of the placeholder attribute for input elements.
The placeholder attribute displays the introductory text until the input box obtains the input focus. When the user inputs content, the introductory content will be automatically hidden. You've no doubt seen this technique implemented in JavaScript thousands of times, but native support from HTML5 is generally better.
HTML code is as follows:

Copy code

The code is as follows:

< input type="text" name="address" placeholder="Please enter your permanent address...">

All you have to do is add a placeholder attribute field and some guiding Text content, no additional JavaScript script is required to achieve this effect, doesn’t it feel great?
Testing the support of placeholder
(Note that this is an article from 2010, up to now, In 2013, all major browsers should support it.)
Since placeholder is a new feature, it is necessary to test browser support. The JS code is as follows:

Copy code

The code is as follows:

// In JS Create an input element and determine whether the element has an attribute called placeholder
// If the browser supports it, this attribute will exist in the DOM referenced in js
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

And if the browser does not support the placeholder feature, then you need one fallback strategy to handle, such as MooTools, Dojo, or other JavaScript tools. (Dojo can be used less now, and jQuery and ExtJS are more commonly used in China.)

Copy code

The code is as follows :

/* jQuery code, of course, remember to introduce the jQuery library*/
$(function(){
if(!hasPlaceholderSupport()){
// Get the address element
var $address = $("input[name='address']");
placeholder = $address.attr("placeholder");
// Bind focus event
$address.bind('focus',function(){
if(placeholder == $address.val()){
$address.val('');
}
} );
// Lost focus event
$address.bind('blur',function(){
if('' == $address.val()){
$address.val (placeholder);
}
});
}
});

placeholder is another great additional browser attribute for replacing js fragments, you You can even edit the HTML5 placeholder style.
The entire code is as follows:

Copy the code

The code is as follows:

<script> <br>// Create an input element in JS and determine whether the element has an attribute called placeholder <br>// If the browser supports it, then the DOM referenced in js will have this Properties <br>function hasPlaceholderSupport() { <br>var input = document.createElement('input'); <br>return ('placeholder' in input); <br>} <br>/* jQuery code, of course, Remember to import the jQuery library*/ <br>$(function(){ <br>if(!hasPlaceholderSupport()){ <br>// Get the address element <br>var $address = $("input[name= 'address']"); <br>placeholder = $address.attr("placeholder"); <br>// Bind focus event<br>$address.bind('focus',function(){ <br> if(placeholder == $address.val()){ <br>$address.val(''); <br>} <br>}); <br>// Lost focus event<br>$address.bind ('blur',function(){ <br>if('' == $address.val()){ <br>$address.val(placeholder); <br>} <br>}); <br> } <br>}); <br></script>