placeholder 相容 ie6/7/8/9
阿新 • • 發佈：2019-02-08
placeholder 屬性是 HTML5 中的新屬性。
placeholder 屬性規定可描述輸入欄位預期值的簡短的提示資訊（比如：一個樣本值或者預期格式的短描述）。
該提示會在使用者輸入值之前顯示在輸入欄位中。
注意：placeholder 屬性適用於下面的 input 型別：text、search、url、tel、email 和 password。
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支援 placeholder 屬性。
注意：Internet Explorer 9 及之前的版本不支援 <input> 標籤的 placeholder 屬性。所以需要做相容。
說明：以下程式碼是在別人的基礎上修改了一點點，然後加了註釋，方便新手理解的。
/* * jQuery placeholder, fix for IE6,7,8,9 * */ var JPlaceHolder = { //檢測 瀏覽器是否支援placehoder _check : function(){ return 'placeholder' in document.createElement('input'); }, //初始化 init : function(){ if(!this._check()){ this.fix(); } }, //修復 fix : function(){ // 使用jquery 獲取頁面所有設定了placehoder的input jQuery(':input[placeholder]').each(function(index, element) { // 獲取placeholder的文字 var self = $(this), txt = self.attr('placeholder'); // 在input外包裹一個相對定位用的div self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'})); // 獲取input的位置資訊 var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left'), fontsize = self.css('font-size'); //alert(fontsize); // 在input的父元素裡面加入span var holder = $('<span></span>').text(txt).css({'position':'absolute', 'left':pos.left+'px', 'top':pos.top+'px', 'height':h+'px', 'line-height':h+'px', 'padding-left':paddingleft+'px', 'font-size':fontsize, 'color':'#aaa'}).appendTo(self.parent()); // input獲得焦點時 隱藏holder，失去焦點時如果input裡沒有內容顯示holder self.focusin(function(e) { holder.hide(); }).focusout(function(e) { if(!self.val()){ holder.show(); } }); // holder被點選時隱藏，input獲得焦點 holder.click(function(e) { holder.hide(); self.focus(); }); }); } }; //執行 jQuery(function(){ JPlaceHolder.init(); });
使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>placehoder for ie6/7/8/9</title> <script src="jquery-1.8.2.min.js"></script> <script src="jquery.JPlaceholder.js"></script> </head> <body> <ul> <!--當滑鼠劃到上面的時候,獲得輸入焦點 --> <li><input type="text" placeholder="使用者名稱" onmouseover="javascript:this.focus();"></li> <li><input type="password" placeholder="密碼" ></li> <li><input type="button" value="提交"></li> </ul> </body> </html>
使用起來方便，只要引入jquery 和jquery.JPlaceholder.js （即第一個程式碼段的檔案）就可以了。