HTML5 placeholder(空白提醒)特性详细介绍

日期:2020-12-11 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

原文详细地址:HTML5′s placeholder Attribute
演试详细地址: placeholder演试
原文时间: 2010年08月09日
汉语翻译时间: 2013年8月6日
访问器引进了很多的HTML5 特点: 一些是根据HTML的,一些是JavaScript APIs方式的,但都很有效。在其中我最喜爱的1个便是为input元素引进了placeholder特性。
placeholder特性显示信息正确引导性文本直至键入框获得键入聚焦点,当有了客户键入內容后正确引导性內容可能全自动掩藏。你毫无疑问见过用JavaScript完成的这类技术性不计其数次了,可是来自HTML5的原生态适用1般来讲会更好1些。
HTML 编码 以下:

拷贝编码
编码以下:

<input type="text" name="address" placeholder="请键入常住详细地址...">

你要做的仅仅是加上1个placeholder特性域,和1些正确引导性的文本內容,不必须附加的JavaScript脚本制作来完成这类实际效果,是否觉得很棒?
检测 placeholder 的适用度
(留意这是2010年的文章内容,到如今,2013年,流行访问器应当都适用了.)
既然 placeholder 是1个新的作用,那末检测访问器的适用是很必须的。JS编码以下:

拷贝编码
编码以下:

// 在JS中建立1个input元素,并分辨元素有木有1个叫做placeholder的特性
// 假如访问器适用的话,那末在js里边引入的DOM就会存在这个特性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

而假如访问器不适用placeholder特点,那你就必须1个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">
<meta name="Description" content="original=http://davidwalsh.name/html5-placeholder">
<script src="http://code.jquery.com/jquery⑴.7.1.min.js"></script>
<script>
// 在JS中建立1个input元素,并分辨元素有木有1个叫做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>