Comment: The browser has introduced many HTML5 features. One of my favorites is to introduce the placeholder attribute for the input element. The placeholder attribute displays guide text until the input box obtains the input focus. When the user inputs the content, the guide content will be automatically hidden.
Original address: HTML5's placeholder AttributeDemo address: placeholder
Original date: August 9, 2010
Translation date: August 6, 2013
The browser introduces many HTML5 features: some are based on HTML, some are in the form of JavaScript APIs, but they are all very useful. One of my favorites is the introduction of the placeholder attribute for the input element.
The placeholder property displays guide text until the input box obtains the input focus. When the user inputs the content, the guide content will be automatically hidden. You've definitely seen this technique implemented in JavaScript thousands of times, but native support from HTML5 is generally better.
The HTML code is as follows:
<input type="text" placeholder="Please enter the permanent address...">
All you have to do is add a placeholder domain and some guided text content, and don't need additional JavaScript scripts to achieve this effect. Isn't it great?
Test placeholder support
(Note that this is an article from 2010. Until now, in 2013, mainstream browsers should have supported it.)
Since placeholder is a new feature, it is necessary to test browser support. The JS code is as follows:
// Create an input element in JS and determine whether the element has an attribute called placeholder
// If the browser supports it, this property will exist in the DOM referenced in js
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
If the browser does not support the placeholder feature, you need a fallback strategy to handle it, such as MooTools, Dojo, or other JavaScript tools. (Now dojo can be used less, and more in China are jQuery and ExtJS.)
/* jQuery code, of course, remember to introduce 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 property for the browser to replace js snippets, you can even edit the placeholder style of HTML5.
All codes are as follows:
<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 placeholder attribute demonstration</title>
<meta content="EditPlus">
<meta content="[email protected]">
<meta content="original=http://davidwalsh.name/html5-placeholder">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
// Create an input element in JS and determine whether the element has an attribute called placeholder
// If the browser supports it, this property will exist in the DOM referenced in js
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
/* jQuery code, of course, remember to introduce 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);
}
});
}
});
</script>
</head>
<body>
<div>
<form method="post" action="">
<input type="text" placeholder="Please enter the permanent address...">
<input type="submit" value="test">
</form>
</div>
</body>
</html>