- <!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>
- //该片段来自于http://www.codesnippet.cn/detail/2411201411031.html
来源: http://www.codesnippet.cn/detail/2411201411031.html