How to use the placeholder attribute in HTML5
This article is about how to use the placeholder attribute in HTML5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
The placeholder property displays guided text until the input box gets the input focus, and the guided content will be automatically hidden when there is user input. You must have seen this technology implemented in JavaScript thousands of times, but native support from HTML5 is generally better.
The HTML code is as follows:
Copy the code
The code is as follows:
All you have to do is add a placeholder property field and some introductory text content, and you don't need additional JavaScript scripts to achieve this effect, doesn't it feel great?
Test the support of placeholder
Note that this is a 2010 article, and by now, 2013, mainstream browsers should support it.
Since placeholder is a new feature, it is necessary to test browser support. The JS code is as follows:
Copy the code
The 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, then the DOM referenced in js will have this attribute
Function hasPlaceholderSupport () {
Var input = document.createElement ('input')
Return ('placeholder' in input)
}
If the browser does not support the placeholder feature, then you need a fallback strategy to deal with, such as MooTools,Dojo, or other JavaScript tools. Dojo can be used less now, and there are more jQuery and ExtJS in China.)
Copy the code
The code is as follows:
/ * jQuery code, of course, remember to introduce the library of jQuery * /
$(function () {)
If (! hasPlaceholderSupport ()) {
/ / get the address element
Var $address = $("input [name = 'address']")
Placeholder = $address.attr ("placeholder")
/ / bind the focus event
$address.bind ('focus',function () {)
If (placeholder = = $address.val ()) {
$address.val ('')
}
});
/ / events that lose focus
$address.bind ('blur',function () {)
If (''= = $address.val ()) {
$address.val (placeholder)
}
});
}
});
Placeholder is another great additional attribute for browsers to replace js fragments, and you can even edit HTML5's placeholder style.
The full code is as follows:
Copy the code
The code is as follows:
HTML5 placeholder property demonstration
/ / create an input element in JS and determine whether the element has an attribute called placeholder
/ / if the browser supports it, then the DOM referenced in js will have this attribute
Function hasPlaceholderSupport () {
Var input = document.createElement ('input')
Return ('placeholder' in input)
}
/ * jQuery code, of course, remember to introduce the library of jQuery * /
$(function () {)
If (! hasPlaceholderSupport ()) {
/ / get the address element
Var $address = $("input [name = 'address']")
Placeholder = $address.attr ("placeholder")
/ / bind the focus event
$address.bind ('focus',function () {)
If (placeholder = = $address.val ()) {
$address.val ('')
}
});
/ / events that lose focus
$address.bind ('blur',function () {)
If (''= = $address.val ()) {
$address.val (placeholder)
}
});
}
});
Thank you for reading! This is the end of this article on "how to use placeholder attributes in HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
