標籤：des style color strong os width
在html5中，文字框，也就是input， type為text，或者password，新增了一個屬性placeholder，也就是預留位置，以下是firefox瀏覽器下的表現形式，當輸入的時候，預留位置就會消失。這個屬性非常好用，因為有這個必要html5才會因素這個屬性，然而在IE下，就沒有這效果，以下是IE9的表現。
下面是JS版：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>跨瀏覽器placehoder</title><meta name="author" content="ifrans.cn" /><meta name="description" content="跨瀏覽器的placehoder原生js版,讓ie也支援placehoder" /><meta name="keywords" content="跨瀏覽器,placehoder,ie,原生js,表單" /><style>body{font:12px/1.5 Arial,"\5b8b\4f53", sans-serif;-webkit-text-size-adjust:100%;color:#333333;background:white;}h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%; font-weight:normal; font-style:normal;}table{border-collapse:collapse;border-spacing:0;font-size:100%;font:inherit;empty-cells:show}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal; font-weight:normal;}button,input,select,textarea{font-family:Arial, Helvetica, sans-serif;text-decoration: none;outline:none;-moz-outline:none;font-size:100%;}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{vertical-align:middle;-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{resize:none;overflow:auto;vertical-align:top}ul,ol,li,dl{list-style-type:none;} i,em{font-style:normal} svg:not(:root){overflow:hidden}img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;-webkit-tap-highlight-color:rgba(0,0,0,0);} a{color:#333;text-decoration: none;outline:none;} a:link {color:#333;} a:visited {color:#333;} a:hover {color:#c00;text-decoration:underline;}a:active{blr:expression(this.onFocus=this.blur())}a:focus {outline:none;-moz-outline:none;}form{ width:300px; margin:20px auto 0;}h3{ font-weight:bold; margin:10px 0;}p{ margin-bottom:10px;}input{ vertical-align:middle; margin-left:10px; height:24px; line-height:24px; width:200px; padding-left:2px; border:1px #CCC solid;}textarea{ vertical-align:middle; margin-left:10px; width:200px; height:50px; font:inherit; padding-left:2px; border:1px #CCC solid;}.wrap-statistics{ visibility:hidden;}.dn{ display:none;} .db{ display:block;}.finps{ width:200px; height:24px;line-height:24px; border:1px #C30 solid; padding:0 5px; color:#000;}.oinps{width:200px; height:24px;line-height:24px; border:1px #CCC solid; padding:0 5px; color:#000;z-index:5;}.ftext{ width:200px; height:50px; border:1px #C30 solid; padding:0 5px; color:#000;}.otext{width:200px; height:50px; border:1px #CCC solid; padding:0 5px; color:#000;}</style></head><body><form id="form1"> <h3>通過input方式類比placeholder</h3> <p><label for="username1">使用者名稱:</label><input type="text" name="username1" class="tst oinps" placeholder="請輸入使用者名稱" value="123" ></p> <p><label for="password1">密 碼:</label><input type="password" name="password1" class="tst oinps" placeholder="請輸入密碼" value="" ></p> <p><label for="address1">地 址:</label><input type="text" name="address1" placeholder="請輸入地址" value="" ></p></form><form id="form2"> <h3>通過textarea方式類比placeholder</h3> <p><label for="remarks1">備 注:</label><textarea placeholder="請輸入備忘" class="otext" id="remarks1"></textarea></p> <p><label for="remarks2">備 注:</label><textarea placeholder="請輸入備忘" class="otext" id="remarks2"></textarea></p> <p><label for="remarks3">備 注:</label><textarea id="remarks3"></textarea></p></form><script>/** * @name placeHolder * @class 跨瀏覽器placeHolder,對於不支援原生placeHolder的瀏覽器，通過value或插入span元素兩種方案類比 * @param {Object} obj 要應用placeHolder的表單元素對象 */function readyplace(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; }}(function (window, undefined) {var hasClass = function(elem,sClass){ var sOldName=elem.className; if(sOldName) { sOldName=sOldName.split(‘ ‘); for(var i=0;i<sOldName.length;i++) { if(sOldName[i]==sClass) { return true; } } }}var addClass = function(elem,sClass){ if(!hasClass(elem,sClass)) { if(elem.className) { var sOldName=elem.className, blank = (sOldName != ‘‘) ? ‘ ‘ : ‘‘; elem.className=sOldName + blank + sClass; } else { elem.className=sClass; } }}var removeClass = function(elem,sClass){ var sOldName=elem.className.split(‘ ‘); var sNewClass=‘‘; for(var i=0;i<sOldName.length;i++) { if(sOldName[i] && sOldName[i]!=sClass) { sNewClass+=sOldName[i]+‘ ‘; } } elem.className=sNewClass.replace(/(^\s+)|(\s+$)/g, ‘‘);} var Place = (function() { return function(set){ this.tagName = set.tagName || "input" ; this.placeattr = set.placeattr || "placeholder" ; this.isempty = set.isempty ? true : false; this.focusCls = set.focusCls || "finps"; this.onblurCls = set.onblurCls || "oinps"; this.init(); } })(); Place.prototype = { init : function() { var elemTagName = document.getElementsByTagName(this.tagName); for(var i=0;i<elemTagName.length;i++){ this.create(elemTagName[i],this.isempty); } }, create:function(obj,isShow){ if (!obj.getAttribute(this.placeattr)) return; var getStyle = function(obj, prop) { if (obj.currentStyle) { //IE瀏覽器 return obj.currentStyle[prop]; } else if (window.getComputedStyle) { //W3C標準瀏覽器 return document.defaultView.getComputedStyle(obj, null)[prop]; } return null; }; var defaultValue = obj.getAttribute(this.placeattr); var placeHolderCont = document.createTextNode(defaultValue); var REPX=/px|em|rem/; var pat=parseInt(getStyle(obj,"paddingTop").replace(REPX,‘‘)) || 0; var par=parseInt(getStyle(obj,"paddingRight").replace(REPX,‘‘)) || 0; var pab=parseInt(getStyle(obj,"paddingBottom").replace(REPX,‘‘)) || 0; var pal=parseInt(getStyle(obj,"paddingLeft").replace(REPX,‘‘)) || 0; var mat=parseInt(getStyle(obj,"marginTop").replace(REPX,‘‘)) || 0; var mar=parseInt(getStyle(obj,"marginRight").replace(REPX,‘‘)) || 0; var mab=parseInt(getStyle(obj,"marginBottom").replace(REPX,‘‘)) || 0; var mal=parseInt(getStyle(obj,"marginLeft").replace(REPX,‘‘)) || 0; var fontSize = getStyle(obj, ‘fontSize‘); if (!obj.getAttribute("id")) { var idFor = "place" +Math.floor(Math.random().toString().substr(2,8)); }else{ var idFor =obj.getAttribute("id"); } obj.setAttribute("id", idFor); var LabelWrap = document.createElement(‘label‘); LabelWrap.setAttribute("for", idFor); LabelWrap.className = ‘placewrap‘; LabelWrap.style.cssText = ‘font-size:‘+fontSize+‘;position:absolute;cursor:text;text-indent:2px;z-index:5;top:‘+mat+‘px;left:‘+mal+‘px;padding:‘+pat+‘px ‘+par+‘px ‘+pab+‘px ‘+pal+‘px;color:#A9A9A9;‘; LabelWrap.style.width = obj.offsetWidth - (parseInt(getStyle(obj, ‘marginLeft‘), 10)||0) + ‘px‘; LabelWrap.style.lineHeight = obj.nodeName.toLowerCase() == ‘textarea‘ ? ‘‘: obj.offsetHeight-pat-pab + ‘px‘; var placebox=document.createElement("div"); placebox.className="labelwraps"; placebox.style.cssText=‘position:relative;visibility:visible;z-index:1;display:inline-block;‘; obj.parentNode.insertBefore(placebox,null); LabelWrap.appendChild(placeHolderCont); placebox.appendChild(LabelWrap); placebox.appendChild(obj); obj.removeAttribute(this.placeattr); LabelWrap.onclick = function() { obj.focus(); }; LabelWrap.style.display = obj.value == ‘‘ ? ‘block‘: ‘none‘; var changeHandler = function() { LabelWrap.style.display = obj.value != ‘‘ ? ‘none‘: ‘block‘; }; var that=this; if(!isShow){ obj.onclick = function() { if(obj.value == defaultValue && obj.value != ‘‘){ LabelWrap.style.display =‘block‘; removeClass(obj,that.onblurCls); addClass(obj,that.focusCls); }else { LabelWrap.style.display =‘none‘; removeClass(obj,that.onblurCls); addClass(obj,that.focusCls); } } obj.oninput = function() { if(obj.value != ‘‘){ LabelWrap.style.display =‘none‘; }else{ LabelWrap.style.display =‘block‘; } } obj.onblur = function() { if(obj.value != ‘‘){ LabelWrap.style.display =‘none‘; removeClass(obj,that.focusCls); addClass(obj,that.onblurCls); }else{ LabelWrap.style.display =‘block‘; removeClass(obj,that.focusCls); addClass(obj,that.onblurCls); } } //obj.onblur(); }else{ obj.onclick = function() { if(obj.value == defaultValue && obj.value != ‘‘){ removeClass(obj,that.onblurCls); addClass(obj,that.focusCls); }else { removeClass(obj,that.onblurCls); addClass(obj,that.focusCls); } }; obj.onblur = function() { if(obj.value != ‘‘){ removeClass(obj,that.focusCls); addClass(obj,that.onblurCls); }else{ removeClass(obj,that.focusCls); addClass(obj,that.onblurCls); } }; if (typeof(obj.oninput) == ‘object‘) { obj.addEventListener("input", changeHandler, false); } else { obj.onpropertychange = changeHandler; } }; return this; } } var placeholder = function(options) { new Place(options); } window.placeholder = placeholder; return placeholder;})(window);readyplace(document, ‘readystatechange‘, function(){ placeholder({focusCls:‘finps‘,onblurCls:‘oinps‘,isempty:false}); placeholder({tagName:‘textarea‘,focusCls:‘ftext‘,onblurCls:‘otext‘,isempty:true});})</script></body></html>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
