Placeholder兼容IE6以及以上版本
来源：互联网 发布：php开源问答系统 编辑：程序博客网 时间：2024/05/22 19:33
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>ie-Placeholder by hadley</title><style>a{color:white;}input:focus,,textarea:focus{outline:none;border-color:#AAA;box-shadow:none;}input,textarea{padding:5px 10px;border:1px solid #CCC;font-size:12px;font-family:consolas;border-radius:3px;box-shadow:0px 0px 3px rgba(1,1,1,0.1);}/*=placeholder color= S*/input{color:black;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#69C;}.ie-placeholder{color:#69C;}input::-moz-placeholder,textarea::-moz-placeholder{color:#69C;opacity:1;}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#69C;}/*=placeholder color= E*/body{background:#444;color:white;font-family:consolas;}h1{font-size:72px;line-height:1;text-shadow:0px 2px 0px black; text-align:center;}.wrap{width:960px;margin-left:auto;margin-right: auto;}dd{margin-left:0;}textarea{width: 100%}pre{font-family:consolas;font-size:12px;}</style><script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script></head><body><h1>ie-Placeholder</h1><div class="wrap"><form action=""><dl><dt>Name:</dt><dd><input type="text" placeholder='ie-placeholder' ></dd><dt>by:</dt><dd><input type="text" placeholder='github.com/nimojs'></dd></dl><dl class="info" ><dt >Describe:</dt><dd><textarea placeholder='input/textarea[placeholder] compatible ie6-ie9' ></textarea></dd></dl><input type="reset" value="reset"></form>Git>><a href="https://github.com/nimojs/ie-placeholder">https://github.com/nimojs/ie-placeholder</a><pre style="margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#a50">/*=placeholder color= S*/</span><br><span style="color:#170">input</span>{<span style="color:#000">color</span>:<span style="color:#164">black</span>;}<br><span style="color:#170">input</span>::<span style="color:#170">-webkit-input-placeholder</span>,<br><span style="color:#170">textarea</span>::<span style="color:#170">-webkit-input-placeholder</span>{<span style="color:#000">color</span>:<span style="color:#219">#69C</span>;}<br>.<span style="color:#170">ie-placeholder</span>{<span style="color:#000">color</span>:<span style="color:#219">#69C</span>;}<br><span style="color:#170">input</span>::<span style="color:#170">-moz-placeholder</span>,<br><span style="color:#170">textarea</span>::<span style="color:#170">-moz-placeholder</span>{<span style="color:#000">color</span>:<span style="color:#219">#69C</span>;<span style="color:#000">opacity</span>:<span style="color:#164">1</span>;}<br><span style="color:#170">input</span>:<span style="color:#170">-ms-input-placeholder</span>,<br><span style="color:#170">textarea</span>:<span style="color:#170">-ms-input-placeholder</span>{<span style="color:#000">color</span>:<span style="color:#219">#69C</span>;}<br><span style="color:#a50">/*=placeholder color= E*/</span></pre><pre style="margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170"><input</span> <span style="color:#00c">type</span>=<span style="color:#a11">"text"</span> <span style="color:#00c">placeholder</span>=<span style="color:#a11">'ie-placeholder'</span> <span style="color:#170">></span></pre><pre style="margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#000">$</span>(<span style="color:#708">function</span>(){<br> <span style="color:#000">fnPlaceholder</span>() <br>})<br><span style="color:#708">var</span> <span style="color:#000">fnPlaceholder</span>=<span style="color:#708">function</span>(){<br> <span style="color:#708">if</span>(!(<span style="color:#a11">'placeholder'</span> <span style="color:#708">in</span> <span style="color:#000">document</span>.<span style="color:#000">createElement</span>(<span style="color:#a11">'input'</span>))){<span style="color:#a50">/* nonsupport placeholder*/</span><br> <span style="color:#000">$</span>(<span style="color:#a11">"input[placeholder],textarea[placeholder]"</span>).<span style="color:#000">closest</span>(<span style="color:#a11">'form'</span>).<span style="color:#000">has</span>(<span style="color:#a11">':reset'</span>).<span style="color:#000">bind</span>(<span style="color:#a11">'reset'</span>,<span style="color:#708">function</span>(){<span style="color:#a50">/*click reset*/</span><br> <span style="color:#000">setTimeout</span>(<span style="color:#708">function</span>(){<br> <span style="color:#000">$</span>(<span style="color:#a11">"input[placeholder],textarea[placeholder]"</span>).<span style="color:#000">each</span>(<span style="color:#708">function</span>(){<br> <span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">val</span>(<span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">attr</span>(<span style="color:#a11">'placeholder'</span>)).<span style="color:#000">addClass</span>(<span style="color:#a11">'ie-placeholder'</span>);<br> }) <br> },<span style="color:#164">0</span>)<br><br> })<br> <span style="color:#000">$</span>(<span style="color:#a11">"input[placeholder],textarea[placeholder]"</span>).<span style="color:#000">each</span>(<span style="color:#708">function</span>(){<br> <span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">val</span>(<span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">attr</span>(<span style="color:#a11">'placeholder'</span>)).<span style="color:#000">addClass</span>(<span style="color:#a11">'ie-placeholder'</span>);<br> }).<span style="color:#000">bind</span>(<span style="color:#a11">'focus'</span>,<span style="color:#708">function</span>(){<br> <span style="color:#708">if</span>(<span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">val</span>()==<span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">attr</span>(<span style="color:#a11">'placeholder'</span>)){<br> <span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">val</span>(<span style="color:#a11">""</span>).<span style="color:#000">removeClass</span>(<span style="color:#a11">'ie-placeholder'</span>)<br> }<br> }).<span style="color:#000">bind</span>(<span style="color:#a11">'blur'</span>,<span style="color:#708">function</span>(){<br> <span style="color:#708">if</span>(<span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">val</span>().<span style="color:#000">length</span>==<span style="color:#164">0</span>){<br> <span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">val</span>(<span style="color:#000">$</span>(<span style="color:#000-2">this</span>).<span style="color:#000">attr</span>(<span style="color:#a11">'placeholder'</span>)).<span style="color:#000">addClass</span>(<span style="color:#a11">'ie-placeholder'</span>)<br> }<br> })<br> }<br>}</pre></div><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script>$(function(){fnPlaceholder()})var fnPlaceholder=function(){if(!('placeholder' in document.createElement('input'))){/* nonsupport placeholder*/$("input[placeholder],textarea[placeholder]").closest('form').has(':reset').bind('reset',function(){/*click reset*/setTimeout(function(){$("input[placeholder],textarea[placeholder]").each(function(){ $(this).val($(this).attr('placeholder')).addClass('ie-placeholder'); }) },0)})$("input[placeholder],textarea[placeholder]").each(function(){$(this).val($(this).attr('placeholder')).addClass('ie-placeholder');}).bind('focus',function(){if($(this).val()==$(this).attr('placeholder')){$(this).val("").removeClass('ie-placeholder')}}).bind('blur',function(){if($(this).val().length==0){$(this).val($(this).attr('placeholder')).addClass('ie-placeholder')}})}}</script><script>$(function(){fnPlaceholder()})var fnPlaceholder=function(){/*https://github.com/nimojs/ie-placeholder*/if(!('placeholder' in document.createElement('input'))){/* nonsupport placeholder*/$("input[placeholder],textarea[placeholder]").closest('form').has(':reset').bind('reset',function(){/*click reset*/setTimeout(function(){$("input[placeholder],textarea[placeholder]").each(function(){ $(this).val($(this).attr('placeholder')).addClass('ie-placeholder'); }) },0)})$("input[placeholder],textarea[placeholder]").each(function(){$(this).val($(this).attr('placeholder')).addClass('ie-placeholder');}).bind('focus',function(){if($(this).val()==$(this).attr('placeholder')){$(this).val("").removeClass('ie-placeholder')}}).bind('blur',function(){if($(this).val().length==0){$(this).val($(this).attr('placeholder')).addClass('ie-placeholder')}})}}</script></body></html>原文转载于：http://runjs.cn/detail/acby8tkr 0 0
- Placeholder兼容IE6以及以上版本
- html5 Placeholder属性兼容IE6、7方法
- jquery html5 实现placeholder兼容password ie6
- placeholder 兼容 ie6/7/8/9
- html5 placeholder ie版本兼容
- 如和在服务器端预览本地图片，兼容IE6以上IE版本
- 根据iframe页面的大小动态调整页面（兼容IE6及以上版本 chrome 火狐）
- javascript 打造城市选择控件，兼容IE6以及以上，谷歌，Firefox
- 城市选择控件文本框【纯javascript打造】兼容IE6以及以上、谷歌、Firefox
- 让低版本浏览器兼容placeholder
- 兼容ie10以下版本的placeholder属性
- 让IE支持placeholder属性，兼容IE6,7,8,9
- Jquery实现IE6 7 8 兼容placeholder属性
- Android Gallery画廊 兼容4.0以上版本
- ecmall 兼容 php5.5以上版本
- div 自适应布局居中，实测兼容 IE6 以上，Chrome
- 真正实现兼容IE6以上主流浏览器-上传图片预览
- textarea 换行 （自动伸缩）|兼容ie6以上
- Ubutun常用命令之tar
- 工业超纯水机：EDI超纯水设备技术介绍
- 一个小BUG的解决过程。
- 18.6.1 缓冲输入文件
- 安装邮件服务器之一
- Placeholder兼容IE6以及以上版本
- 函数被改变
- IOS研究之App转让流程须知详细介绍
- Uva 10905 — Children's Game
- C++ 线程池的使用——备忘
- 学生信息管理系统之——为什么要配置数据源及SQL Server 2012 ODBC 的配置
- 如何处理错误ORA-29275
- GitHub 优秀的 Android 开源项目
- hdu1316(How Many Fibs?)高精度
