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 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
python字典的常用操作方法小结
2016/05/16 Python
python函数定义和调用过程详解
2020/02/09 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
承租经营合作者协议书
2014/10/01 职场文书
2014年业务工作总结
2014/11/17 职场文书
三行辞职书范文
2015/02/26 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记