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教程(1):什么是CSS3
Apr 02 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
php实现的CSS更新类实例
2014/09/22 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
利用python生成照片墙的示例代码
2020/04/09 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
个人简历自我评价
2014/02/02 职场文书
理财计划书
2014/08/14 职场文书
债务纠纷代理词
2015/05/25 职场文书
公司欠款证明
2015/06/24 职场文书