足球游戏_中国足彩网¥体育资讯$

HTML5 placeholder(空白提示)属性介绍
来源:易贤网 阅读:1130 次 日期:2016-07-13 11:46:28
温馨提示:易贤网小编为您整理了“HTML5 placeholder(空白提示)属性介绍”,方便广大网友查阅!

浏览器引入了许多的HTML5 特性: 有些是基于HTML的,有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。

placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。你肯定见过用JavaScript实现的这种技术成千上万次了,但是来自HTML5的原生支持一般来说会更好一些。

HTML 代码 如下:

代码如下:

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

你要做的仅仅是添加一个placeholder属性域,以及一些引导性的文字内容,不需要额外的JavaScript脚本来实现这种效果,是不是感觉很棒?

测试 placeholder 的支持度

(注意这是2010年的文章,到现在,2013年,主流浏览器应该都支持了.)

既然 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>

中国足彩网信息请查看网页制作
易贤网手机网站地址:HTML5 placeholder(空白提示)属性介绍
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标