1. Create JS file: Jquery.JPlaceholder.js
/*
* JQuery placeholder, fix for ie6,7,8,9
* hovertree.com
*/
var Jplaceholder = {
Detection
_check:function () {
Return ' placeholder ' in document.createelement (' input ');
},
Initialization
Init:function () {
if (!this._check ()) {
This.fix ();
}
},
How to fix the question
Fix:function () {
JQuery (': Input[placeholder] '). Each (function (index, Element) {
var = $ (this), txt = self.attr (' placeholder ');
Self.wrap ($ (' <div></div> '). CSS ({position: ' relative ', Zoom: ' 1 ', border: ' None ', background: ' None ', padding: ' None ', margin: ' None '});
var pos = self.position (), H = Self.outerheight (true), paddingleft = Self.css (' Padding-left ');
var holder = $ (' <span></span> '). Text (TXT). css ({position: ' absolute ', Left:pos.left, Top:pos.top, height:h , Lienheight:h, Paddingleft:paddingleft, color: ' #aaa '}). AppendTo (Self.parent ());
Self.focusin (function (e) {
Holder.hide ();
}). focusout (function (e) {
if (!self.val ()) {
Holder.show ();
}
});
Holder.click (function (e) {
Holder.hide ();
Self.focus ();
});
});
}
};
Perform
JQuery (function () {
Jplaceholder.init ();
});
2. The following methods are used in the page:
<!doctype html>
<meta charset= "Utf-8" >
<title>jquery Jplaceholder Demo-Q </title> A
<script src= "Http://hovertree.com/ziyuan/jquery/jquery-1.8.3.min.js" ></script>
<script src= "Http://hovertree.com/texiao/jquery/43/jquery.JPlaceholder.js" ></script>
<body>
<form>
<div>
<ul>
<li>
<input type= "text" name= "username" placeholder= "username" >
</li>
<li>
<input type= "password" name= "username" placeholder= "password" >
</li>
<li>
<button type= "button" > Login </button>
</li>
</ul>
</div>
</form>
<a href= "http://hovertree.com/h/bjaf/ww7ek8wn.htm" > References </a>
</body>
Practice is the only standard to test truth, hope can help everyone.
Input placeholder properties ie, 360 browser compatibility issues
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
