HTML5中placeholder屬性怎么用

這篇文章給大家分享的是有關(guān)HTML5中placeholder屬性怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),成都響應(yīng)式網(wǎng)站建設(shè)公司,網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:028-86922220

placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點(diǎn),當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會自動隱藏。你肯定見過用JavaScript實(shí)現(xiàn)的這種技術(shù)成千上萬次了,但是來自HTML5的原生支持一般來說會更好一些。

HTML 代碼如下：

復(fù)制代碼

代碼如下:

你要做的僅僅是添加一個placeholder屬性域,以及一些引導(dǎo)性的文字內(nèi)容,不需要額外的JavaScript腳本來實(shí)現(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('');

}

});

// 失去焦點(diǎn)事件

$address.bind('blur',function(){

if('' == $address.val()){

$address.val(placeholder);

}

});

}

});

placeholder 是瀏覽器另一個偉大的附加屬性用于取代js片段，你甚至可以編輯HTML5的placeholder樣式.

全部代碼如下：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<title> HTML5 placeholder屬性演示 </title>

// 在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('');

}

});

// 失去焦點(diǎn)事件

$address.bind('blur',function(){

if('' == $address.val()){

$address.val(placeholder);

}

});

}

});

</script>

</head>

<body>

<div>

</form>

</div>

</body>

</html>

感謝各位的閱讀！關(guān)于“HTML5中placeholder屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：HTML5中placeholder屬性怎么用
網(wǎng)站網(wǎng)址：http://jinyejixie.com/article20/ghphco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、商城網(wǎng)站、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML5中placeholder屬性怎么用