Placeholder兼容IE6以及以上版本

<!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">/*=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*/</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"><input type="text" placeholder='ie-placeholder' ></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">$(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') } }) } }</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>

秒客网

Placeholder兼容IE6以及以上版本

相关文章