各种兼容的placeholder
2013-12-13 16:40
225 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>验证Valid ----placeholder</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> span.emptyhint {color:#999;position:absolute;padding:3px;} </style> </head> <body> <div id=doc3> <div id="bd" > <div class="section-ctn"> <ul> <li> <label class="k">订单主人:</label> <input type="text" placeholder="请填写订单主人" value="JK"> </li> <li> <label class="k">订单号:</label> <input type="text" placeholder="请填写订单号"> </li> <li> <label class="k">备注:</label> <textarea type="text" placeholder="请填写备注"></textarea> </li> </ul> </div> </div> <div id="ft"> 部分内容来自 qwrap wagang组件Valid: (<a href="http://dev.qwrap.com/resource/js/wagang/_index.html">http://dev.qwrap.com/resource/js/wagang/_index.html</a>) </div> <div id="ft"> QWrap网址: <a href="http://www.qwrap.com">www.qwrap.com</a> </div> </div> </body> <script> function initPlaceHolders(){ if('placeholder' in document.createElement('input')){ //如果浏览器原生支持placeholder return ; } function target (e){ var e=e||window.event; return e.target||e.srcElement; }; function _getEmptyHintEl(el){ var hintEl=el.hintEl; return hintEl && g(hintEl); }; function blurFn(e){ var el=target(e); if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下,onfocusin会在div等元素触发 var emptyHintEl=el.__emptyHintEl; if(emptyHintEl){ //clearTimeout(el.__placeholderTimer||0); //el.__placeholderTimer=setTimeout(function(){//在360浏览器下,autocomplete会先blur再change if(el.value) emptyHintEl.style.display='none'; else emptyHintEl.style.display=''; //},600); } }; function focusFn(e){ var el=target(e); if(!el || el.tagName !='INPUT' && el.tagName !='TEXTAREA') return;//IE下,onfocusin会在div等元素触发 var emptyHintEl=el.__emptyHintEl; if(emptyHintEl){ //clearTimeout(el.__placeholderTimer||0); emptyHintEl.style.display='none'; } }; if(document.addEventListener){//ie document.addEventListener('focus',focusFn, true); document.addEventListener('blur', blurFn, true); } else{ document.attachEvent('onfocusin',focusFn); document.attachEvent('onfocusout',blurFn); } var elss=[document.getElementsByTagName('input'),document.getElementsByTagName('textarea')]; for(var n=0;n<2;n++){ var els=elss ; for(var i =0;i<els.length;i++){ var el=els[i]; var placeholder=el.getAttribute('placeholder'), emptyHintEl=el.__emptyHintEl; if(placeholder && !emptyHintEl){ emptyHintEl=document.createElement('span'); emptyHintEl.innerHTML=placeholder; emptyHintEl.className='emptyhint'; emptyHintEl.onclick=function (el){return function(){try{el.focus();}catch(ex){}}}(el); if(el.value) emptyHintEl.style.display='none'; el.parentNode.insertBefore(emptyHintEl,el); el.__emptyHintEl=emptyHintEl; } } } } initPlaceHolders(); </script> </html>
相关文章推荐
- placeholder各种浏览器兼容问题
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
- 兼容IE678的placeholder
- 一个audio标签在各浏览器上各种不兼容,各种小毛病,现在还是flash最靠谱
- 基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载
- css样式设置图片半透明度,兼容各种浏览器
- 兼容各种浏览器的文字循环无缝滚动效果
- 一段DIV内容垂直的代码,兼容各种浏览器
- HTML:IE9及9以下浏览器兼容placeholder(包含密码输入框)
- 浏览器各种坑爹兼容问题
- placeholder的颜色兼容写法
- 解决html5新标签 placeholder 低版本浏览器下不兼容问题
- 解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 兼容各种浏览器的图片垂直居中CSS解决方案
- jquery 兼容各种浏览器select动态加载选择的方法
- jquery select动态加载选择(兼容各种浏览器)
- 基于各种浏览器兼容的写法
- JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
- 使用Raphael绘制流程图,自绘动态箭头,可拖动,有双击事件,纯前端,兼容各种浏览器