HTML5 placeholder(空白提示)屬性介紹
發(fā)布時間：2013-08-07 16:01:41 作者：佚名 
我要評論
我要評論瀏覽器引入了許多的HTML5 特性其中我最喜歡的一個就是為input元素引入了placeholder屬性，placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點,當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會自動隱藏
原文地址：HTML5′s placeholder Attribute
演示地址: placeholder演示
原文日期： 2010年08月09日
翻譯日期： 2013年8月6日
瀏覽器引入了許多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜歡的一個就是為input元素引入了placeholder屬性。
placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點,當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會自動隱藏。你肯定見過用JavaScript實現(xiàn)的這種技術(shù)成千上萬次了,但是來自HTML5的原生支持一般來說會更好一些。
HTML 代碼 如下：
<input type="text" name="address" placeholder="請輸入常住地址...">
你要做的僅僅是添加一個placeholder屬性域,以及一些引導(dǎo)性的文字內(nèi)容,不需要額外的JavaScript腳本來實現(xiàn)這種效果，是不是感覺很棒?
測試 placeholder 的支持度
(注意這是2010年的文章，到現(xiàn)在，2013年，主流瀏覽器應(yīng)該都支持了.)
既然 placeholder 是一個新的功能，那么測試瀏覽器的支持是很有必要的。JS代碼如下：
// 在JS中創(chuàng)建一個input元素，并判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
而如果瀏覽器不支持placeholder特性，那你就需要一個fallback策略來處理，比如MooTools,Dojo,或者其他JavaScript工具。(現(xiàn)在dojo可以用的少了，國內(nèi)更多的是jQuery和ExtJS。)
/* jQuery 代碼,當(dāng)然，記得引入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中創(chuàng)建一個input元素，并判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
/* jQuery 代碼,當(dāng)然，記得引入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>
演示地址: placeholder演示
原文日期： 2010年08月09日
翻譯日期： 2013年8月6日
瀏覽器引入了許多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很有用。其中我最喜歡的一個就是為input元素引入了placeholder屬性。
placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點,當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會自動隱藏。你肯定見過用JavaScript實現(xiàn)的這種技術(shù)成千上萬次了,但是來自HTML5的原生支持一般來說會更好一些。
HTML 代碼 如下：
復(fù)制代碼
代碼如下:<input type="text" name="address" placeholder="請輸入常住地址...">
你要做的僅僅是添加一個placeholder屬性域,以及一些引導(dǎo)性的文字內(nèi)容,不需要額外的JavaScript腳本來實現(xiàn)這種效果，是不是感覺很棒?
測試 placeholder 的支持度
(注意這是2010年的文章，到現(xiàn)在，2013年，主流瀏覽器應(yīng)該都支持了.)
既然 placeholder 是一個新的功能，那么測試瀏覽器的支持是很有必要的。JS代碼如下：
復(fù)制代碼
代碼如下:// 在JS中創(chuàng)建一個input元素，并判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
而如果瀏覽器不支持placeholder特性，那你就需要一個fallback策略來處理，比如MooTools,Dojo,或者其他JavaScript工具。(現(xiàn)在dojo可以用的少了，國內(nèi)更多的是jQuery和ExtJS。)
復(fù)制代碼
代碼如下:/* jQuery 代碼,當(dāng)然，記得引入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樣式.
全部代碼如下：
復(fù)制代碼
代碼如下:<!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中創(chuàng)建一個input元素，并判斷元素有沒有一個叫做placeholder的屬性
// 如果瀏覽器支持的話，那么在js里面引用的DOM就會存在這個屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
/* jQuery 代碼,當(dāng)然，記得引入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>
相關(guān)文章
- 這篇文章主要為大家詳細介紹了HTML5 placeholder屬性，placeholder屬性能夠讓你在文本框里顯示提示信息，感興趣的小伙伴們可以參考一下2016-06-22
- Placeholder是HTML5新增的另一個屬性，當(dāng)input或者textarea設(shè)置了該屬性后，該值的內(nèi)容將作為灰字提示顯示在文本框中，當(dāng)文本框獲得焦點時，提示文字消失2014-09-02
- html 5有個很棒的屬性，placeholder，但是在不支持html5的低版本的瀏覽器中，因此要人為的去實現(xiàn)placeholder屬性，下面有個示例，感興趣的朋友可以參考下2014-06-30
HTML 5 input placeholder 屬性如何完美兼任ie
這篇文章主要介紹了HTML 5 input placeholder 屬性完美兼任ie的方法,需要的朋友可以參考下2014-05-12限制html文本框input只能輸入數(shù)字和小數(shù)點
本文主要介紹了限制html文本框input只能輸入數(shù)字和小數(shù)點的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-27- 這篇文章主要介紹了如何使一個input文本框隨其中內(nèi)容長度變化而變化長度，實現(xiàn)原理很簡單，大家看過之后就知道了2014-04-08
使用placeholder屬性設(shè)置input文本框的提示信息
這篇文章主要介紹了使用placeholder屬性設(shè)置input文本框的提示信息,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-19
