HTML5里的placeholder属性使用实例和美化显示效果的方法


Posted in HTML / CSS onApril 23, 2014

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美化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效果。

HTML / CSS 相关文章推荐
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
You might like
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
实现“上一页”和“下一页按钮
2006/10/09 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php xhprof使用实例详解
2019/04/15 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python字典底层实现原理详解
2019/12/18 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
大学生社团活动总结
2014/04/26 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2015年中秋寄语
2015/07/31 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技