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实现字体颜色渐变的实现
Mar 09 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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分页显示制作详细讲解
2006/12/05 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
JS功能代码集锦
2016/05/04 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python程序输出无内容的解决方式
2020/04/09 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
一道Delphi上机题
2012/06/04 面试题
总裁秘书岗位职责
2013/12/04 职场文书
一名女生的自荐信
2013/12/08 职场文书
服务标兵事迹材料
2014/05/04 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
公司感谢信范文
2015/01/22 职场文书
情人节活动总结范文
2015/02/05 职场文书
病房管理制度范本
2015/08/06 职场文书
教师网络培训心得体会
2016/01/09 职场文书