pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5 placeholder(空白提示)屬性介紹_html5教程技巧

HTML5 placeholder(空白提示)屬性介紹_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲、HTML5教程
點(diǎn)評:瀏覽器引入了許多的HTML5 特性其中我最喜歡的一個(gè)就是為input元素引入了placeholder屬性,placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點(diǎn),當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會(huì)自動(dòng)隱藏
原文地址:HTML5′s placeholder Attribute
演示地址: placeholder演示
原文日期: 2010年08月09日
翻譯日期: 2013年8月6日
瀏覽器引入了許多的HTML5 特性: 有些是基于HTML的,有些是JavaScript APIs形式的,但都很有用。其中我最喜歡的一個(gè)就是為input元素引入了placeholder屬性。
placeholder屬性顯示引導(dǎo)性文字直到輸入框獲取輸入焦點(diǎn),當(dāng)有了用戶輸入內(nèi)容后引導(dǎo)性內(nèi)容將會(huì)自動(dòng)隱藏。你肯定見過用JavaScript實(shí)現(xiàn)的這種技術(shù)成千上萬次了,但是來自HTML5的原生支持一般來說會(huì)更好一些。
HTML 代碼 如下:

復(fù)制代碼
代碼如下:

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

你要做的僅僅是添加一個(gè)placeholder屬性域,以及一些引導(dǎo)性的文字內(nèi)容,不需要額外的JavaScript腳本來實(shí)現(xiàn)這種效果,是不是感覺很棒?
測試 placeholder 的支持度
(注意這是2010年的文章,到現(xiàn)在,2013年,主流瀏覽器應(yīng)該都支持了.)
既然 placeholder 是一個(gè)新的功能,那么測試瀏覽器的支持是很有必要的。JS代碼如下:

復(fù)制代碼
代碼如下:

// 在JS中創(chuàng)建一個(gè)input元素,并判斷元素有沒有一個(gè)叫做placeholder的屬性
// 如果瀏覽器支持的話,那么在js里面引用的DOM就會(huì)存在這個(gè)屬性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

而如果瀏覽器不支持placeholder特性,那你就需要一個(gè)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 是瀏覽器另一個(gè)偉大的附加屬性用于取代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)建一個(gè)input元素,并判斷元素有沒有一個(gè)叫做placeholder的屬性
// 如果瀏覽器支持的話,那么在js里面引用的DOM就會(huì)存在這個(gè)屬性
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 method="post" action="">
<input type="text" name="address" placeholder="請輸入常住地址...">
<input type="submit" value="測試">
</form>
</div>
</body>
</html>

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實(shí)現(xiàn)柱狀圖的示例,本文使用canvas來實(shí)現(xiàn)一個(gè)圖表,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計(jì)、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗(yàn)圖文教程,非常不錯(cuò),需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機(jī)房漫游動(dòng)畫,需要的朋友可以參考下
這篇文章主要介紹了html5實(shí)現(xiàn)移動(dòng)端適配完美寫法,需要的朋友可以參考下
本篇文章主要介紹了HTML5響應(yīng)式(自適應(yīng))網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 回转炉,外热式回转窑,回转窑炉-淄博圣元窑炉工程有限公司 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 领先的大模型技术与应用公司-中关村科金 | CNC机加工-数控加工-精密零件加工-ISO认证厂家-鑫创盟 | 冷却塔风机厂家_静音冷却塔风机_冷却塔电机维修更换维修-广东特菱节能空调设备有限公司 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 洗砂机械-球磨制砂机-洗沙制砂机械设备_青州冠诚重工机械有限公司 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 冷却塔改造厂家_不锈钢冷却塔_玻璃钢冷却塔改造维修-广东特菱节能空调设备有限公司 | 专业甜品培训学校_广东糖水培训_奶茶培训_特色小吃培训_广州烘趣甜品培训机构 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 鼓风干燥箱_真空烘箱_高温干燥箱_恒温培养箱-上海笃特科学仪器 | 储能预警-储能消防系统-电池舱自动灭火装置-四川千页科技股份有限公司官网 | 环境模拟实验室_液体-气体控温机_气体控温箱_无锡双润冷却科技有限公司 | 外贸资讯网 - 洞悉全球贸易,把握市场先机 | 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | 首页-恒温恒湿试验箱_恒温恒湿箱_高低温试验箱_高低温交变湿热试验箱_苏州正合 | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | 北京四合院出租,北京四合院出售,北京平房买卖 - 顺益兴四合院 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅 | 金联宇电缆总代理-金联宇集团-广东金联宇电缆实业有限公司 | 智能风向风速仪,风速告警仪,数字温湿仪,综合气象仪(气象五要素)-上海风云气象仪器有限公司 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 百度网站优化,关键词排名,SEO优化-搜索引擎营销推广 | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 河南档案架,档案密集架,手动密集架,河南密集架批发/报价 | 青岛空压机,青岛空压机维修/保养,青岛空压机销售/出租公司,青岛空压机厂家电话 | 转向助力泵/水泵/发电机皮带轮生产厂家-锦州华一精工有限公司 | 过滤器_自清洗过滤器_气体过滤器_苏州华凯过滤技术有限公司 | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 空气净化器租赁,空气净化器出租,全国直租_奥司汀净化器租赁 | 盘装氧量分析仪-防爆壁挂氧化锆分析仪-安徽吉帆仪表有限公司 | 高压负荷开关-苏州雷尔沃电器有限公司 | 西安标准厂房_陕西工业厂房_西咸新区独栋厂房_长信科技产业园官方网站 | 撕碎机,撕破机,双轴破碎机-大件垃圾破碎机厂家 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 |