Placeholder兼容IE6以及以上版本

最新推荐文章于 2024-07-14 14:30:45 发布
骙骁
最新推荐文章于 2024-07-14 14:30:45 发布
阅读量588
点赞数
分类专栏： html5 文章标签： Placeholder html5 Placeholder兼容IE
html5 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!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

收藏

觉得还不错? 一键收藏
0
评论
Placeholder兼容IE6以及以上版本

ie-Placeholder by hadley 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-famil
复制链接

扫一扫