Home > Developer > Web Develop
original link : https://www.cnblogs.com/xiaoxianweb/p/5692301.html
Type is text or password input, which in practice often has a placeholder, similar to this:
In the absence of HTML5, generally written value, with the use of JS Interactive, text box to get focus, the hint text disappears, lost focus, the text appears again, so the experience is very good, and do not have to put the text in front of the function words, save space. Post a jquery code:
$ (": Input"). focus (function () {//default text disappears
if ($ (this). Val () ==this.defaultvalue) {
$ (this). Val ("");
}
}). blur (function () {//default text appears
if ($ (this). val () = = "") {
$ (this). Val (This.defaultvalue);
}
});
In HTML5, the input text box or TEXTAREA text field has its own placeholder property, placeholder, instead of value, and do not have to write JS, which itself has the user input content, the prompt text disappears function.
My idol Zhang Xin Xu very early wrote an article detailing its characteristics, the original address: http://www.zhangxinxu.com/wordpress/?p=2169
But yes, the headache of IE,
Look at this piece of green sea in a few red, ie is the great devil, and, IE8 incompatible even, IE9 is not compatible, how can be assured of the use of, use will also be led to detect the bug.
Or use back value, but, such a good attribute is not reconciled, Madam Pity. It doesn't matter, there are problems to find Niang Ah, search search, so that placeholder can be compatible with IE results not too much oh.
Finally, find the perfect solution and be compatible with password. Using the plugin Jquery-placeholder.js
Simple to use, just introduce jquery library files and plug-in files, and add a line of code calls, specifically as follows:
<! DOCTYPE html>
<title></title>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Jquery-placeholder.js" ></script>
<script>jquery (function ($) {$.placeholder.ini ();}) </script>
<style>input{width:500px}</style>
<body>
<div>
<div>
<span>username:</span>
<span>
<input type= "text" placeholder= "Put your name here, max length is + letters" maxlength= "/>"
</span>
</div>
<div>
<span>password:</span>
<span>
<input type= "Password" placeholder= "Your password Here"/>
</span>
</div>
</div>
</body>
"Learn" Jquery.placeholder.js let IE browser support HTML5 placeholder
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
