HTML5里的placeholder属性

标签: 技术技巧 html5 placeholder | 发表时间:2014-04-19 00:46 | 作者:santiago
出处:http://www.webhek.com

HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的 placeholder属性。 placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好!

HTML代码

<input type="text" name="first_name" placeholder="你的姓名..." />

你也看见了,需要做的只是在文本框的声明标签上加入 placeholder属性。完全不需要JavaScript来创造这种效果。

检查浏览器是否支持Placeholder属性

因为 placeholder是一种新属性,很有必要检查一下你的浏览器是否支持它,比如IE6、IE8肯定是不支持的:

function hasPlaceholderSupport() {
	var input = document.createElement('input');
	return ('placeholder' in input);
}

如果用户的浏览器不支持 placeholder特征,你需要借助MooTools, Dojo, 或其它JavaScript工具来实现它:

/* mootools ftw! */
var firstNameBox = $('first_name'),
	message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
	focus: function() {
		if(firstNameBox.value == message) { searchBox.value = ''; }
	},
	blur: function() {
		if(firstNameBox.value == '') { searchBox.value = message; }
	}
});

用CSS美化placeholder

前一篇文章里我写了 如何用CSS美化鼠标选择的文字。在进一步研究时我发现了另外一个有趣的CSS功能:CSS美化 INPUT placeholder效果。下面让我来用简单的CSS代码美化文本框里的placeholder文字。

CSS代码

火狐浏览器里的用法和谷歌浏览器里不太一样。它们的名称都很好理解:

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

你可以控制placeholder文字的字体、颜色和风格。你甚至可以将文本框的placeholder以动画方式显示。 美化你的文本框都是些看起来很小的事情,但对于一些交互式的网站来说,成功的关键就在于细节。现在IE10里也只支持placeholder了,相信越来越多的人会使用这种原生的placeholder效果。

相关 [html5 placeholder 属性] 推荐:

HTML5里的placeholder属性

- - WebHek
HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用. 其中我最喜欢的一个特征就是文本框(INPUT)里的 placeholder属性. placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏.

【博文转载】HTML5的PLACEHOLDER属性

- - HTML5研究小组
西风瘦马 发布于 二月 17, 2011. HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等. Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.

HTML5 placeholder实际应用经验分享及拓展

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2169. 一、HTML5 placeholder相关的引言. placeholder在英汉词典中解释成了“占位符”. 要理解并不难,请看此场景:. ”您可能会疑问,“这不是就是狗狗树下撒尿尿”. 确实,该场景可以较好的诠释 placeholder“占位符”之意.

html5全局属性spellcheck

- Stanley - Designsor
不多说,截图看一下说明问题:. 设置元素的这个属性为false即可关闭拼写检查:. 默认为true值,如果设置为readonly或者disabled,则默认为false. 除了ie之外,ff,chrome,safari,opera都支持~. 经常有产品或者测试问我这货是什么,这次你们都知道怎么和他们解释了吧,你妹的…….

HTML5元素的一些通用属性

- - 脚本爱好者
HTML 5: 元素的通用属性. 元素的通用属性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone. 1、accesskey - 用于定义快捷键.

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

- - HTML5研究小组
autoplay:自动播放. controls:浏览器自带的控制条.

【转载】HTML5有效提升iFrame安全性 新增Sandbox属性

- - HTML5研究小组
HTML 5将针对iframe元素增加sandbox属性,可以防止不信任的Web页面执行某些操作. HTML 5规范的编辑Ian Hickson谈到了sandbox的好处,它可以防止如下操作:. 访问父页面的DOM(从技术角度来说,这是因为相对于父页面iframe已经成为不同的源了). 通过脚本嵌入自己的表单或是操纵表单.

预览文章: HTML5 视频播放事件属性与API控件

- - BlogJava_首页
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了. 视频格式:avi、rmb、wmv、mpeg4、ogg、webm. 视频主要有三部分组成:视频、音频、编码格式.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).