javascript 模仿 html5 placeholder

 <form action="?action=deliver" method="post" class="deliver-form">
	<div class="article-type">
	    <span>類型:</span>
	    <?php foreach (range(1,14) as $num){ ?>
	    <input type="radio" name="type"><img src="images/icon<?php echo $num ?>.gif" >
	    <?php } ?>
	</div>
	<div class="article-tit">
	    <input type="text" id="title" name="article-title" value="請輸入標題">
	</div>
	<div class="article-cont">
	    <textarea name="article-text"  id="textarea" cols="30" rows="10">請輸入帖子內容</textarea>
	</div>
	<div class="code-sub">
	    <input type="text" name="code" value="請輸入4位驗證碼" id="code-ipt"><img src="code.php" alt="驗證碼" id="code">
	    <input type="submit" value="發表" class="sub">
	</div>
 </form>

jsjavascript

//input模仿placeholder,參數id是input的id,value爲input的value
//若是爲textarea的話,value則爲textterea的默認內容(textarea不能在value使用默認值)
//value首先要在html中定義
//默認文字的顏色能夠先在css中聲明
function _placeholder(id,value){
	var _text = document.getElementById(id);
	_text.onblur = function(){
		if(this.value == ''){
			this.style.color='#666';
			this.value = value;
		}
	}
	_text.onfocus = function(){
		if(this.value == value){
			this.value = '';
			this.style.color='#333';
		}
	}
}
_placeholder('title','請輸入標題');
_placeholder('textarea','請輸入帖子內容');
_placeholder('code-ipt','請輸入4位驗證碼');
相關文章
相關標籤/搜索