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 效果.
来源: http://www.webhek.com/post/html5-placeholder.html