HTML5 placeholder(空白提示) 屬性

時間 2020-05-19

標籤 html5 html placeholder 空白提示屬性欄目 HTML5 简体版

原文原文鏈接

原文地址：HTML5′s placeholder Attribute javascript

原文日期： 2010年08月09日
css

翻譯日期： 2013年8月6日html

瀏覽器引入了許多的HTML5 特性: 有些是基於HTML的，有些是JavaScript APIs形式的,但都頗有用。其中我最喜歡的一個就是爲input元素引入了placeholder屬性。
placeholder屬性顯示引導性文字直到輸入框獲取輸入焦點,當有了用戶輸入內容後引導性內容將會自動隱藏。你確定見過用JavaScript實現的這種技術成千上萬次了,可是來自HTML5的原生支持通常來講會更好一些。
html5

HTML 代碼以下：
java

<input type="text" name="address" placeholder="請輸入常住地址...">

你要作的僅僅是添加一個placeholder屬性域,以及一些引導性的文字內容,不須要額外的JavaScript腳原本實現這種效果，是否是感受很棒?
測試 placeholder 的支持度

(注意這是2010年的文章，到如今，2013年，主流瀏覽器應該都支持了.)
jquery

既然 placeholder 是一個新的功能，那麼測試瀏覽器的支持是頗有必要的。JS代碼以下：
瀏覽器

// 在JS中建立一個input元素，並判斷元素有沒有一個叫作placeholder的屬性
// 若是瀏覽器支持的話，那麼在js裏面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
	var input = document.createElement('input');
	return ('placeholder' in input);
}

而若是瀏覽器不支持placeholder特性，那你就須要一個fallback策略來處理，好比MooTools,Dojo,或者其餘JavaScript工具。(如今dojo能夠用的少了，國內更多的是jQuery和ExtJS。)

/* jQuery 代碼,固然，記得引入jQuery的庫哦*/
$(function(){
  if(!hasPlaceholderSupport()){
	// 獲取address元素
	var $address = $("input[name='address']");
	placeholder = $address.attr("placeholder");
	// 綁定 focus事件
	$address.bind('focus',function(){
	  if(placeholder == $address.val()){
	    $address.val('');
	  }
	});
	// 失去焦點事件
	$address.bind('blur',function(){
	  if('' == $address.val()){
	    $address.val(placeholder);
	  }
	});
  }
});

placeholder 是瀏覽器另外一個偉大的附加屬性用於取代js片斷，你甚至能夠編輯HTML5的 placeholder樣式.
所有代碼以下：

<!DOCTYPE HTML>
<html>
 <head>
  <title> HTML5 placeholder屬性演示 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Description" content="original=http://davidwalsh.name/html5-placeholder">
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
	// 在JS中建立一個input元素，並判斷元素有沒有一個叫作placeholder的屬性
	// 若是瀏覽器支持的話，那麼在js裏面引用的DOM就會存在這個屬性
	function hasPlaceholderSupport() {
		var input = document.createElement('input');
		return ('placeholder' in input);
	}
	/* jQuery 代碼,固然，記得引入jQuery的庫哦*/
	$(function(){
	  if(!hasPlaceholderSupport()){
		// 獲取address元素
		var $address = $("input[name='address']");
		placeholder = $address.attr("placeholder");
		// 綁定 focus事件
		$address.bind('focus',function(){
		  if(placeholder == $address.val()){
			$address.val('');
		  }
		});
		// 失去焦點事件
		$address.bind('blur',function(){
		  if('' == $address.val()){
			$address.val(placeholder);
		  }
		});
	  }
	});
  </script>
 </head>

 <body>
	<div>
		<form method="post" action="">
			<input type="text" name="address" placeholder="請輸入常住地址...">
			<input type="submit" value="測試">
		</form>
	</div>
 </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。